0

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

请参阅我的小提琴以了解我的意思：

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

2 回答 2

1

只需添加宽度即可ul.sub查看此小提琴 - http://jsfiddle.net/im4aLL/GM9Lm/46/

于 2013-05-28T10:10:24.853 回答
0

将宽度添加到您的ul.sub：

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

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

ul.sub li{
    clear: both;
}
于 2013-05-28T10:14:19.893 回答