下拉菜单溢出问题：Mouseenter 和 Mouseleave + slideDown 和 slideUp

Question

我有这个带有子菜单的简单下拉菜单。 问题是，当我将菜单项悬停以显示其子菜单（使用 slideDown）时，它仅在动画/效果运行时显示部分菜单（溢出问题） - 动画完成后，才显示整个菜单

查看我的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);
});

Answer 1

只需将宽度添加到ul.sub 看这个小提琴 - http://jsfiddle.net/im4aLL/GM9Lm/46/

Answer 2

为您的ul.sub 添加宽度：

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

要解决浮动项目的问题，还请添加：

ul.sub li{
    clear: both;
}