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;
}

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

2 个答案: