$(function() { $("ul.main-menu li").hover(function() { $(">ul:not(:animated)", this).slideDown(500); }, function() { $(">ul", this).slideUp(300); }); });
*{ padding: 0; margin: 0; list-style: none; font-size:12px; } 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; }
<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>