JavaScriptを使わないプルダウンメニュー

CSSで作るプルダウンメニュー

JavaScriptを使っても勿論作成出来るのですが、
今回はCSSだけで作ってみます。
画像もなしでーす。

リストを入れ子構造で記述していきます。

HTML

<ｄｉｖ id="nav">
<ｄｉｖ id="gnav">
<ｕｌ class="pulldown_menu">
<ｌｉ><ａ href="#">メニュー1
<ｕｌ>
<ｌｉ><ａ href="#">サブメニュー1-1
<ｌｉ><ａ href="#">サブメニュー1-2
<ｌｉ><ａ href="#">サブメニュー1-3

<ｌｉ><ａhref="#">メニュー2
<ｕｌ>
<ｌｉ><ａ href="#">サブメニュー2-1
<ｌｉ><ａ href="#">サブメニュー2-2
<ｌｉ><ａ href="#">サブメニュー2-3
<ｌｉ><ａ href="#">サブメニュー2-4
<ｌｉ><ａ href="#">サブメニュー2-5
<ｌｉ><ａ href="#">サブメニュー2-6

<ｌｉ><ａ href="#">メニュー3
<ｕｌ>
<ｌｉ><ａ href="#">サブメニュー3-1

<ｌｉ><ａ href="#">メニュー4

<ｌｉ><ａ href="#">メニュー5
<ｕｌ>
<ｌｉ><ａ href="#">サブメニュー5-1
<ｌｉ><ａ href="#">サブメニュー5-2
<ｌｉ><ａ href="#">サブメニュー5-3

<！-- /メニュー5 -->

<！-- /.pulldown_menu -->
<！-- /#gnav -->
<！-- /#nav -->

CSS

li {
list-style-type: none;
}

/* style */

ul.pulldown_menu {
width: 760px;
}

ul.pulldown_menu a {
color: #ffffff;
background-color: #036;
}

ul.pulldown_menu a:hover,ul.pulldown_menu a:active {
background-color: #069;
}

ul.pulldown_menu li {
float: left;
width: 150px;
height: 40px;
margin: 0 1px;
line-height: 3;
}

/* hoverでメニューを表示 */
ul.pulldown_menu li:hover ul {
display: block;
}

ul.pulldown_menu li a {
text-decoration: none;
display: block;
width: 150px;
height: 40px;
text-align: center;
}

ul.pulldown_menu li ul {
display: none;
}

ul.pulldown_menu li ul li {
clear: both;
margin: 0;
}