サイドバー内での使用を想定した縦型のメニューです。
/* --- ナビゲーションバー --- */ .nav { width: 180px; /* ナビゲーションの幅 */ font-size: 80%; } /* --- メニューエリア --- */ .nav .nl { margin: 0; padding: 0; border-top: 1px #c0c0c0 dotted; /* 最上部の枠線 */ list-style-type: none; text-align: left; } /* --- メニュー項目 --- */ .nav .nl li { padding: 3px 0; /* 項目のパディング(上下、左右) */ background-color: #ffffff; /* 項目の背景色 */ border-bottom: 1px #c0c0c0 dotted; /* 項目の下枠線 */ } /* --- リンク --- */ .nav .nl li a { display: block; position: relative; /* IE6用 */ padding: 8px 10px 8px 12px; /* リンクエリアのパディング(上右下左) */ background: url(ver_menu2_off.gif) no-repeat 2px; /* 左側の垂直線 */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .nav .nl li a:hover { background: url(ver_menu2_on.gif) no-repeat 2px; /* ポイント時の垂直線 */ }
<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>