企業サイトのデザインなどでよく使用する角丸ナビメニュー（背景に画像を使用）。
タブメニューなどにも使えますね。
デモ： 下地をブルーの背景。背景画像にグレイの角丸メニュー。オンマウスでブルーの角丸背景画像。
HTML
<div id="sample-nav"> <ul> <li><a href="#"><span>ホーム</span> <span class="corner"> </span></a> </li> <li><a href="#"><span>会社案内</span> <span class="corner"> </span></a> </li> <li><a href="#"><span>事業概要</span> <span class="corner"> </span></a> </li> <li><a href="#"><span>アクセス</span> <span class="corner"> </span></a> </li> <li><a href="#"><span>お問い合わせ</span> <span class="corner"> </span></a> </li> </ul> </div>
CSS
div#sample-nav {
list-style-type: none;
width:492px;
float: left;
padding-bottom: 6px;
font: 12px Meiryo, "メイリオ",Georgia,Verdana,"ＭＳ Ｐゴシック",sans-serif;
background: #0099cc;
margin-right: -10px;
overflow: hidden;
_zoom: 1;
}
div#sample-nav ul {
list-style-type : none ;
width:500px;
margin:0;
padding:0;
background: #fff;
float: left;
}
div#sample-nav ul li {
padding-right: 6px;
background: #fff;
float: left;
}
div#sample-nav ul li a {
display: block;
background: #eee url(背景画像) no-repeat 0 0;
background-position: 0 -75px;
padding: 4px 0px 4px 6px;
text-decoration: none;
color: #333 !important;
position: relative;
outline: none;
float: left;
}
div#sample-nav ul li a:hover {
background-position: 0 0px;
color: #fff !important;
}
div#sample-nav ul li.selected a{
background-position: 0 0px;
color: #fff !important;
}
<p>div#sample-nav ul li a span {
display: block;
padding-left: 12px;
cursor: pointer;
font-size:14px;
padding-top:4px;
float: left;
}
div#sample-nav ul li a span.corner {
display: block;
background: url(背景画像の右角) no-repeat right 0;
background-position: right -75px;
position: relative;
top:-4px;
float: left;
}
div#sample-nav ul li a:hover span.corner {
background-position: right 0px;
cursor: pointer;
}
div#sample-nav ul li.selected a span.corner {
background-position: right 0px;
cursor: pointer;
}