jQueryで、簡単にドロップダウンメニューを作成する方法を紹介します。

↓以下が実際のソースサンプルです。

▼JavaScript

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("ul.menu li").hover(function(){
			$("ul.sub:not(:animated)", this).slideDown();
		}, function(){
			$("ul.sub",this).slideUp();
		});
	});
</script>

▼CSS

<style type="text/css">
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	color: #fff;
}
ul.menu li {
	float: left;
	position: relative;
	margin: 0 0 0 1px;
	padding: 5px;
	width: 200px;
	background-color: #555555;
	display: block;
}
ul.sub {
	display: none;
	position: absolute;
	margin-left: -6px;
	padding: 0;
}
ul.sub li a {
	padding: 5px 10px;
	margin-left: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
	display: block;
	color: #fff;
}
ul.sub li a:hover {
	background: #ff9900;
	text-decoration:none;
}
</style>

▼HTML

<ul class="menu">
  <li>MENU 1</li>
  <li>MENU 2
    <ul class="sub">
      <li><a href="#">MENU 2-1</a></li>
      <li><a href="#">MENU 2-2</a></li>
    </ul>
  </li>
  <li>MENU 3
    <ul class="sub">
      <li><a href="#">MENU 3-1</a></li>
      <li><a href="#">MENU 3-2</a></li>
    </ul>
  </li>
  <li>MENU 4
    <ul class="sub">
      <li><a href="#">MENU 4-1</a></li>
      <li><a href="#">MENU 4-2</a></li>
      <li><a href="#">MENU 4-3</a></li>
    </ul>
  </li>
</ul>

今回、参考にさせていただいたのは、
『誰でも出来る！jQueryでドロップダウンメニューをわずか7行で完成させる方法』さんです。
ありがとうございます。

デモページは、こちら