A21

/*css*/
#wrapper .layoutQ21 ul{
	width: 100px;
	color:#fff;
}

.layoutQ21 ul li{
	padding:20px 10px;
	text-align:center;
	}

.layoutQ21 ul li#new{
	background-color:#F00;
	}
.layoutQ21 ul li#info{
	background-color:#F66;
	}
.layoutQ21 ul li#item{
	background-color:#3F6;
	}
.layoutQ21 ul li#shop{
	background-color:#390;
	}

.layoutQ21 ul li#company{
	background-color:#0FF;
	}

.layoutQ21 ul li a{
	color:#fff;
	}

.layoutQ21 ul li#new:hover{
	background-color:#fff;
	border:1px solid #f00;
	}

.layoutQ21 ul li#new a:hover{
	color:#f00;
	}

.layoutQ21 ul li#info{
	background-color:#F66;
	}
	
.layoutQ21 ul li#info:hover{
	background-color:#fff;
	border:1px solid #f66;
	}

.layoutQ21 ul li#info a:hover{
	color:#f66;
	}
	
.layoutQ21 ul li#item{
	background-color:#3F6;
	}

.layoutQ21 ul li#item:hover{
	background-color:#fff;
	border:1px solid #3F6;
	}

.layoutQ21 ul li#item a:hover{
	color:#3F6;
	}	

.layoutQ21 ul li#shop{
	background-color:#390;
	}

.layoutQ21 ul li#shop:hover{
	background-color:#fff;
	border:1px solid #390;
	}

.layoutQ21 ul li#shop a:hover{
	color:#390;
	}	

.layoutQ21 ul li#company{
	background-color:#0FF;
	}

.layoutQ21 ul li#company:hover{
	background-color:#fff;
	border:1px solid #0FF;
	}

.layoutQ21 ul li#company a:hover{
	color:#0FF;
	}	
<!-- html-->
<div class="layoutQ21">
    <ul>
    <li id="new"><a href="#">新着情報</a></li>
    <li id="info"><a href="#">お知らせ</a></li>
    <li id="item"><a href="#">製品情報</a></li>
    <li id="shop"><a href="#">店舗案内</a></li>
    <li id="company"><a href="#">会社案内</a></li>
    </ul>
</div>