サンプル紹介

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

CSSのみでロールオーバー

　
　
CSSソース

ul{
	margin-left:0px;
	padding-left:0px;
	list-style-type:none;
	font-size:100%;
}
li{
	background:blue;
	margin:0 0 1px 0;
}
li a{
	display:block;
	padding:1em 10px;
	text-decoration:none;
}
li a:hover{
	background-color:red;
}

　
　
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のみでロールオーバー