私はホバー上のドロップダウンメニューを持っている私は、水平方向のメニューを持って

Question

私のドロップダウンメニューの私の丸みを帯びた底部と問題が発生しています：

HTML構造は次のようである：

<div id="menu"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Lorem</a></li> 
     <li><a href="#">Ipsum</a></li> 

     <li><!-- DropDown--> 
      <a href="#">Drop Down</a> 
      <ul> 
       <li><a href="#">Dd Item</a></li> 
       <li><a href="#">Another One</a></li> 
       <li><a href="#">Lalalal</a></li> 
       <li><a href="#">Item</a></li> 
      </ul><div class="clear"></div> 
     </li> 

    </ul><div class="clear"></div> 
</div> 

私は現在、次のCSSと/右左下を丸めるしようとしています：

#menu ul li ul { 
-khtml-border-radius-bottomright:8px; 
-khtml-border-radius-bottomleft:8px; 
-moz-border-radius-bottomright:8px; 
-moz-border-radius-bottomleft:8px; 
-webkit-border-bottom-right-radius:8px; 
-webkit-border-bottom-left-radius:8px; 
border-bottom-right-radius:8px; 
border-bottom-left-radius:8px; 
} 

プロ私の<li>の背景が<ul>の丸められたボーダーを妨げていると醜いです。

私はjsFiddleので、あなたがliの下の角があるためliのulと固体背景に国境半径の、ul外に見せている完全なコード

Answer 1

を見ることができますをしました。

修正方法：#menu ul ul li:last-childを境界線スタイルに追加します。ブラウザのサポートを強化したい場合は、代わりに最後の要素にクラス名を使用します。

デモ：http://jsfiddle.net/5MLTu/1/

別の方法： <ul>のためのあなたの現在の境界線のスタイルにスタイル overflow:hiddenを追加します。 デモ： http://jsfiddle.net/5MLTu/2/

注：上記の方法は唯一のFirefoxで動作しているようですので、それを使用しないでください:)この男である