【CSS】ul liを使った縦メニューリスト サンプル

ul liを使った、縦並びのメニューリストサンプルです。特徴としては下記になります。

・メニューボタンはテキスト形式

・ボタン領域全体にリンク設定（マウスオーバーで色を変える）

・テキストリンクの横に矢印のアイコンを設置

◆HTML

<div>
<ul>
<li><a href="#.html">テキスト</a></li>
<li><a href="#.html">テキスト</a></li>
<li><a href="#.html">テキスト</a></li>
<li><a href="#.html">テキスト</a></li>
<li><a href="#.html">テキスト</a></li>
<li><a href="#.html">テキスト</a></li>
</ul>
</div>

◆CSS

.navi ul {
width: 200px;
margin: 0px;
padding: 0;
list-style: none;
border-top: 1px solid #ccccca;
}

.navi li {
background:#fff;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

.navi a {
padding: 10px 0 8px 25px;
display: block;
text-decoration: none;
color: #666;
background: url(../img/icon.gif) no-repeat 10px 15px;
}

.navi a:hover {
color: #0066ff;
background: url(../img/icon.gif) no-repeat 10px 15px;
background-color: #ccffff;
}

実際のサンプルページはこちら

ボタン全体を画像にした方が楽ですが、制作後の編集や更新を考えるとテキスト形式の方が都合がよいと思います。