在向下導航菜單上實現圓角

Question

我正在使用下拉菜單，您可以在這里看到。 我在ul#navigation和ul.subnavigation 。 當子菜單向下滑動時，可以看到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

為什么要定位子菜單？ 移開它的位置，然后隱藏它，直到懸停觸發為止。

檢查這個小提琴 。