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

リストメニュー2

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

サンプル

ソース

<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{
  padding:0;
  margin:0;
  list-style-type:none;
  background:none;
}
.list li a{
  display:block;
  padding:.2em 1em;
  width:150px;
  color:#ffffff;
}
.list li a:link,
.list li a:visited{
  background-color:#003399;
  text-decoration:none;
  border-top:1px solid #ccccff;
  border-left:1px solid #ccccff;
  border-right:1px solid #000066;
  border-bottom:1px solid #000066;
}
.list li a:hover,
.list li a:active{
  background-color:0099cc;
  text-decoration:none;
  border-top:1px solid #000066;
  border-left:1px solid #000066;
  border-right:1px solid #ccccff;
  border-bottom:1px solid #ccccff;
}

注意

横幅はwidthと左右paddingの合計の値になります。
しかし、IEの互換モードではwidthがpaddingを含めてしまうので、それを解消するにはドキュメント宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
をHTMLファイルの最初に記載して標準モードにして下さい。