サンプル紹介

TOP > サンプル紹介 > HTML > CSSのみでドロップダウンメニュー

CSSのみでドロップダウンメニュー

cssのみでドロップダウンメニューを表現
IE6は非対応
　

　
　
CSSソース

ul,li,{
margin:0px;
padding:0px;
}
li{
list-style:none;
float:left;
}
li li{
float:none;
}
ul li a{
display:block;
width:120px;
padding:5px 10px 8px;
border:1px solid #ccc;
background:#f6f3da;
color:#000;
text-decoration:none
}
ul li a:hover{
background:#ffba88;
}
ul li li a{
border:1px solid #ccc;
border-right:1px solid #333;
border-bottom:1px solid #333;
background:#f5f5f5;
}
ul li li a:hover{
background:#666;
color:#fff;
}
p{
clear:left;
}
ul li ul{
display:none;
}
ul li:hover ul{
display:block;
position:absolute;
}

　
　
HTMLソース

<ul>
<li><a href="#">メインメニュー１</a>
<ul>
<li><a href="#">サブメニュー１-１</a></li>
<li><a href="#">サブメニュー１-２</a></li>
</ul>
</li>
<li><a href="#">メインメニュー２</a>
<ul>
<li><a href="#">サブメニュー２-１</a></li>
<li><a href="#">サブメニュー２-２</a></li>
<li><a href="#">サブメニュー２-３</a></li>
<li><a href="#">サブメニュー２-４</a></li>
</ul>
</li>
<li><a href="#">メインメニュー３</a>
<ul>
<li><a href="#">サブメニュー３-１</a></li>
<li><a href="#">サブメニュー３-２</a></li>
<li><a href="#">サブメニュー３-３</a></li>
</ul>
</li>
</ul>

↑トップへ

トップ

会社概要

製品紹介

サンプル紹介

サポート

フォトストック

リンク

お問い合わせ

サンプル紹介

CSSのみでドロップダウンメニュー