サイドバー内での使用を想定した縦型のメニューです。
/* --- ナビゲーションバー --- */ .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-color: #ffffff; /* 項目の背景色 */ border-bottom: 1px #cccccc solid; /* 項目の下枠線 */ } /* --- リンク --- */ .nav .nl li a { display: block; position: relative; /* IE6用 */ padding: 9px 10px; /* リンクエリアのパディング(上下、左右) */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .nav .nl li a:hover { background-color: #f0ffff; /* ポイント時の背景色 */ text-decoration: underline; /* テキストの下線(あり) */ }
<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>