サイドバー内での使用を想定した縦型のメニューです。
ver_menu3_back.gif
ver_menu3_off.gif
ver_menu3_on.gif
※画像へは直接リンクしないでください。(ダウンロードしてから使用してください)
/* --- ナビゲーションバー --- */ .nav { width: 180px; /* ナビゲーションの幅 */ font-size: 80%; } /* --- メニューエリア --- */ .nav .nl { margin: 0; padding: 0; border-top: 1px #cccccc solid; /* 最上部の枠線 */ list-style-type: none; text-align: left; } /* --- メニュー項目 --- */ .nav .nl li { background: #ffffff url(ver_menu3_back.gif) repeat-x top; /* 項目の背景 */ border-bottom: 1px #cccccc solid; /* 項目の下枠線 */ } /* --- リンク --- */ .nav .nl li a { display: block; position: relative; /* IE6用 */ padding: 11px 10px 11px 12px; /* リンクエリアのパディング(上右下左) */ background: url(ver_menu3_off.gif) no-repeat 3px; /* 左側の三角マーク */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .nav .nl li a:hover { background: url(ver_menu3_on.gif) no-repeat 3px; /* ポイント時の三角マーク */ }
<div class="nav"> <ul class="nl"> <li><a href="#">メニュー項目1</a></li> <li><a href="#">メニュー項目2</a></li> <li><a href="#">メニュー項目3</a></li> <li><a href="#">メニュー項目4</a></li> <li><a href="#">メニュー項目5</a></li> </ul> </div>