Result
http://jsfiddle.net/kachibito/ZNyeT/embedded/result,js,css,html
jQuery
$(function() { //li要素にマウスホバーでスライドダウン/アップのイベント発火 $("ul.main-menu li").hover(function() { $(">ul:not(:animated)", this).slideDown(500); }, function() { $(">ul", this).slideUp(300); }); });
css
ul.main-menu li{ float: left; width: 120px; height: 38px; background: #ccc; position: relative; } ul.main-menu li a:hover{ background: #f0f0f0; } ul.main-menu li a{ display: block; width: 100%; height: 100%; line-height: 38px; text-indent: 10px; text-decoration: none; position:relative; } ul.main-menu li ul.sub-menu{ position: absolute; display: none; } ul.sub-menu li{ float:none; } ul.sub-menu li ul.sub-menu{ top:0; left:120px; } ul.main-menu:after{ content:"."; display: block; clear: both; height: 0; visibility: hidden; }
html
<ul class="main-menu"> <li> <a href="#">メニュー1</a> <ul class="sub-menu"> <li><a href="#">メニュー1-1</a></li> <li><a href="#">メニュー1-2</a> <ul class="sub-menu"> <li><a href="#">メニュー1-2-1</a></li> <li><a href="#">メニュー1-2-2</a></li> <li><a href="#">メニュー1-2-3</a></li> </ul> </li> <li><a href="#">メニュー1-3</a></li> </ul> </li> <li> <a href="#">メニュー2</a> <ul class="sub-menu"> <li><a href="#">メニュー2-1</a></li> <li><a href="#">メニュー2-2</a></li> <li><a href="#">メニュー2-3</a> <ul class="sub-menu"> <li><a href="#">メニュー2-3-1</a></li> <li><a href="#">メニュー2-3-2</a> <ul class="sub-menu"> <li><a href="#">メニュー2-3-2-1</a></li> <li><a href="#">メニュー2-3-2-2</a></li> <li><a href="#">メニュー2-3-2-3</a></li> </ul> </li> <li><a href="#">メニュー2-3-3</a></li> </ul> </li> </ul> </li> <li> <a href="#">メニュー3</a> <ul class="sub-menu"> <li><a href="#">メニュー3-1</a></li> <li><a href="#">メニュー3-2</a></li> <li><a href="#">メニュー3-3</a></li> </ul> </li> <li> <a href="#">メニュー4</a> <ul class="sub-menu"> <li><a href="#">メニュー4-1</a></li> <li><a href="#">メニュー4-2</a></li> <li><a href="#">メニュー4-3</a></li> </ul> </li> </ul>