Question

我正在处理您可以看到here的下拉菜单。我在ul#navigation和ul.subnavigation都有圆角。当子菜单向下滑动时，可以看到ul.subnavigation底部的边框与ul#navigation的内容重叠，当我希望它平滑滑动时，没有“闪烁”。我知道这个问题是由圆角引起的。当菜单下拉时，我需要ul.subnavigation覆盖ul#navigation底部的圆角，而不会看到双边底问题。我希望这很清楚！代码如下。

谢谢，

尼克

HTML

<ul id="navigation">
    <li class="dropdown"><a href="#">menu</a>
        <ul class="sub_navigation">
            <li><a href="#">home</a></li>
            <li><a href="#">help</a></li>
            <li><a href="#">disable tips</a></li>
        </ul>
    </li>
</ul>

JQUERY

$('.dropdown').hover(function() {
    $(this).find('.sub_navigation').slideToggle();
});

CSS

ul#navigation, ul.sub_navigation {
    margin:0;
    padding:0;
    list-style-type:none;
    min-width:100px;
    background-color: white;
    font-size:15px;
    font-family: Trebuchet MS;
    text-align: center;
    -khtml-border-radius: 0 0 5px 5px;    
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    border:1px black solid;
    border-top:none;
}

ul.sub_navigation {
    margin-left:-1px;
    position: absolute;
    top:28px;
}

ul#navigation {
    float:left;
    position:absolute;
    top:0;
}

ul#navigation li {
    float:left;
    min-width:100px;
}

ul.sub_navigation {
    position:absolute;
    display:none;
}

ul.sub_navigation li {
    clear:both;
}

 a,
 a:active,
 a:visited {
    display:block;
    padding:7px;
}

Answer 1

为什么要定位子菜单？取下它上面的定位，然后将其隐藏起来，直到悬停触发。

检查this fiddle。

在向下滑动导航菜单上实现圆角

1 个答案: