トップ > スタイルシートテクニック > リストメニュー4

リストメニュー4

スポンサード リンク
リストメニューのサンプルを置いておきます。
色や幅、余白などを変更して自由に使って下さい。

サンプル


ソース

<ul class="list">
<li><a href="#sample">リスト１</a></li>
<li><a href="#sample">リスト２</a></li>
<li><a href="#sample">リスト３</a></li>
<li><a href="#sample">リスト４</a></li>
<li><a href="#sample">リスト５</a></li>
</ul>
.list{
  padding:0;
  margin:0;
  list-style-type:none;
}
.list li{
  float:left;
  padding:0;
  margin:0;
  list-style-type:none;
  background:none;
  background-color:#eeeeff;
}
.list li a{
  display:block;
  padding:.2em 0 0;
  width:80px;
  color:#0000ff;
  font-size:12px;
  text-align:center;
}
.list li a:link,
.list li a:visited{
  text-decoration:none;
  border-bottom:5px solid #eeeeff;
}
.list li a:hover,
.list li a:active{
  text-decoration:none;
  border-bottom:5px solid #003399;
}

注意

「float:left;」を使っているので、続く要素に「clear:left」を指定して回り込みを解除して下さい。