このサンプルは、スタイルシートとイメージを使用して影付きのメニューを表示します。マウスをメニューに移動するとメニューが凹みます。メニューをクリックすると凹みが固定化されます。
このサンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。
#menu
{
padding: 0 0 0 10px;
margin: 0 0 0 300px;
list-style: none;
width: 690px;
height: 63px;
background: url(images/background.png);
}
#menu li a:hover, #menu li.active a
{
background: url(images/taba.png) right top;
cursor: pointer;
color: #000;
line-height: 32px;
}
#menu li a:hover b, #menu li.active a b
{
background: url(images/taba.png) left top;
cursor: pointer;
}