如何使我的垂直下拉菜單具有輕鬆效果？

Question

的jsfiddle＃http://jsfiddle.net/UqyAq/

HTML -

<nav> 
    <ul> 
     <li>Button 1</li> 
     <li>Button 2 
      <ul> 
       <li>Sub-Button 1</li> 
       <li>Sub-Button 2</li> 
       <li>Sub-Button 3</li> 
      </ul> 
     </li> 
     <li>Button 3</li> 
     <li>Button 4</li> 
     <li>Button 5</li> 
    </ul> 
</nav> 

CSS -

* { 
    margin: 0; 
    padding: 0; 
} 

nav { 
    height: 100%; width: 18%; 
    position: absolute; 
} 
nav ul { 
    list-style-type: none; 
    font-family: 'Universal Accreditation', Serif; 
    font-size: 18pt; 
    letter-spacing: 1px; 
    font-variant: small-caps; 
    color: black; 
} 

nav ul ul { 
    display: none; 
} 

nav ul li { 
    display: block; 
} 

nav ul li:hover ul { 
    display: block; 
} 

基本上，你正在尋找一個簡單的非有序列表下拉菜單。我試圖找出我需要使用什麼來爲第二層的下拉菜單創建緩動效果。將鼠標懸停在「按鈕2」上將會出現子菜單。

注意它是如何跳躍運動的。我將如何減慢速度？也許看起來子菜單是從「按鈕2」下滑出的？

我應該使用JavaScript還是css？

Answer 1

使用此代碼..

HTML：

<ul id="menu"> 
<li><a href="#">Link 1</a> 
    <ul class="submenu"> 
    <li><a href="#">Sub Link 1.1</a> 
     <ul class="submenu"> 
      <li><a href="#"> Sub Link 1.1.1</a></li> 
      <li><a href="#"> Sub Link 1.1.2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Sub Link 1.2</a></li> 
    <li><a href="#">Sub Link 1.3</a></li> 
    </ul> 
</li> 
<li><a href="#">Link 2</a> 
    <ul class="submenu"> 
    <li><a href="#">Sub Link 2.1</a> 
     <ul class="submenu"> 
      <li><a href="#"> Sub Link 2.1.1</a></li> 
      <li><a href="#"> Sub Link 2.1.2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Sub Link 2.2</a></li> 
    </ul> 
</li> 
</ul> 

CSS： .submenu { 顯示：無; } #menu li ul {margin：left-left：15px; }

JQUERY：

$(document).ready(function() { 
$('#menu > li').hover(function() { $(this).find("ul:first").show(); }, 
         function() { $(this).find("ul:first").hide(); } 
); 
$('#menu li li').hover(function() { 
    $('ul:first', this).each(function() { 
     var p = $(this).parent(); 
     $(this).css('top', p.position().top) 
       .css('left', p.position().left + p.width()) 
       .show(); 
    });}, 
    function() { $('ul:first', this).hide(); } 
); 
});