在向下滑動導航菜單上實施圓角

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。