スタイルシートで実装するクリックで開くメニュー

久しぶりに投稿します。
既に出ていたらすみません。

HTML

<ul id="nav">
	<li class="nav_01">nav_01
<ul>
	<li><a href="#">sub_nav_01</a></li>
	<li><a href="#">sub_nav_02</a></li>
	<li><a href="#">sub_nav_03</a></li>
	<li><a href="#">sub_nav_04</a></li>
</ul>
</li>
	<li class="nav_01">nav_02
<ul>
	<li><a href="#">sub_nav_01</a></li>
	<li><a href="#">sub_nav_02</a></li>
	<li><a href="#">sub_nav_03</a></li>
	<li><a href="#">sub_nav_04</a></li>
</ul>
</li>
</ul>

CSS

#nav li
{
width:200px;
height:20px;
text-align:center;
background:#DDDDDD;
}
#nav li:hover
{
background:#00FF00;
position:relative;
}
#nav li ul
{
display:none;
}
#nav li:active ul ,
#nav li ul:hover
{
display:block;
position:absolute;
top:0px;
left:0px;
padding:0px 0px 0px 200px;
z-index:5;
}
#nav li ul li a
{
width:200px;
height:20px;
display:block;
}
#nav li ul li a:hover
{
background:#00FF00;
}

サンプルページ

クリックでは閉じませんorz

This entry was posted in 未分類. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

コメントをどうぞ

Your email is never published nor shared. Required fields are marked *

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">