プルダウンメニューの作成

メニューバーにプルダウンメニューを追加する方法。

[html]

<ul id="menu">
<li>メニュー1
<ul>
<li><a href="#">サブメニュー1-1</a></li>
<li><a href="#">サブメニュー1-2</a></li>
<li><a href="#">サブメニュー1-3</a></li>
</ul>
</li>
<li>メニュー2
<ul>
<li><a href="#">サブメニュー2-1</a></li>
<li><a href="#">サブメニュー2-2</a></li>
<li><a href="#">サブメニュー2-3</a></li>
</ul>
</li>
</ul>

[css]

#menu li {
  position: relative;
  float: left;
  margin: 0;
  padding: 5px;
  width: 200px;
  height: 20px;
  border: solid 1px #ccc;
  font-weight: bold;
}
#menu li:hover {
  color: #fff;
  background: #333;
}
#menu li ul {
  display: none;
  position: absolute;
  top: 30px;
  left: -1px;
  padding: 5px;
  width: 200px;
  background: #eee;
  border: solid 1px #ccc;
}
#menu li ul li {
  margin: 0;
  padding: 0;
  width: 200px;
  border: none;
}
#menu li ul li a {
  display: inline-block;
  width: 200px;
  height: 20px;
}
#menu li ul li a:hover {
  background: #999;
  color: #fff;
}

[jQuery]

$("#menu li").hover(function() {
	$(this).children('ul').show();
}, function() {
	$(this).children('ul').hide();
});