下拉菜單溢出問題：Mouseenter和Mouseleave + slideDown和slideUp

我有這個簡單的子菜單下拉菜單。問題是，當我懸停菜單項來顯示它的子菜單（與slideDown），它只顯示菜單的一部分，而動畫/效果正在運行（溢出問題） - 當動畫完成時，只有整個菜單是顯示的下拉菜單溢出問題：Mouseenter和Mouseleave + slideDown和slideUp

見我fiddle，看看我的意思是：

HTML：

<ul id="main"> 
    <li><a>Item1</a> 
     <ul class="sub"> 
      <li>subItem1</li> 
      <li>subItem2</li> 
      <li>subItem3</li> 
     </ul> 
    </li> 
    <li><a>Item2</a> 
     <ul class="sub"> 
      <li>subItem4</li> 
      <li>subItem5</li> 
      <li>subItem6</li> 
     </ul>  
    </li> 
    <li><a>Item3</a></li> 
    <li><a>Item4</a></li> 
</ul>

CSS：

個

ul{ 
    list-style: none; 
    position: relative; 
    z-index: 99; 
} 
ul#main li{ 
    float: left; 
    position: relative; 
    width: 50px; 
    overflow: visible; 
} 
ul#main li a{ 
    display: block; 
    padding: 0px 10px 10px 10px; 
} 
ul.sub{ 
    position: relative; 
    top: 100%; 
    right: 30%; 
    display: none; 
    z-index: 999; 
} 

ul.sub li{ 
    float: none;  
}

JS：

$('ul#main li').mouseenter(function(){ 
    $(this).children('ul.sub').slideDown(300); 
}); 
$('ul#main li').mouseleave(function(){ 
    $(this).children('ul.sub').slideUp(300); 
});

來源

2013-05-28 DextrousDave

只需添加寬度ul.sub看到這個小提琴 - http://jsfiddle.net/im4aLL/GM9Lm/46/

來源

2013-05-28 10:10:24 HADI

謝謝，但看看它將寬度更改爲100px時會發生什麼...爲什麼它是由子列表項浮動的？ - http://jsfiddle.net/GM9Lm/58/ – DextrousDave

是的，那麼你可能需要在ul.sub li之前添加ul＃main，因爲float none不會像以前使用ID定義的那樣工作。請看看這個 - http://jsfiddle.net/im4aLL/GM9Lm/60/ – HADI

哦，是的......我的CSS禮儀在哪裏...... Cascading ... id享有比班級更多的特權...謝謝你的幫助，欣賞 – DextrousDave

添加寬度您ul.sub：

ul.sub{ 
    position: relative; 
    top: 100%; 
    right: 30%; 
    display: none; 
    z-index: 999; 
    width: 50px; 
}

要使用浮動添加項目解決問題還有：

ul.sub li{ 
    clear: both; 
}

來源

2013-05-28 10:14:19 Kasyx

謝謝，但看看它將寬度更改爲100px時會發生什麼......爲什麼它由子列表項浮動？ - http://jsfiddle.net/GM9Lm/58/ – DextrousDave

我改進了解決此問題的答案 – Kasyx

下拉菜單溢出問題：Mouseenter和Mouseleave + slideDown和slideUp

回答

相關問題