邊框半徑僅在下拉菜單的底部

Question

工作在一個簡單的導航欄上。到目前爲止它對我的工作完全沒有一點細節。當它下降時，我想讓中間部分保持矩形，底部始終保持彎曲。現在我擁有它，所以底部是彎曲的，但是當我將鼠標懸停在其上時，常規矩形顯示備份。我試圖修復它自己，但所有我能得到工作，將改變所有部分以彎曲的

這裏是一個的jsfiddle什麼我的工作：http://jsfiddle.net/7mjEC/

這裏是CSS：

@charset "utf-8"; 
#topMenu { 
    padding: 0px; 
    width: 760px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    position: relative; 
    top: 80px; 
} 
#topMenu ul { 
    margin: 0px; 
    padding: 0px; 
} 
#topMenu ul li { 
    background-color: #666; 
    float: left; 
    border: 1px solid #999999; 
    position: relative; 
    list-style-type: none; 
} 
#topMenu ul li a { 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    line-height: 30px; 
    color: #FFF; 
    text-decoration: none; 
    text-align: center; 
    display: block; 
    height: 30px; 
    width: 150px; 
} 
#topMenu ul ul { 
    position: absolute; 
    visibility: hidden; 
    top: 31px; 
} 
#topMenu ul li ul li a:hover { 
    background-color: #39F; 
} 
#topMenu ul li:hover ul { 
    visibility: visible; 
} 
#topMenu ul li:hover { 
    background-color: #919191; 
} 
#topMenu .topleftmenuitem { 
    border-radius: 20px 0 0 20px; 
} 
#topMenu .toprightmenuitem { 
    border-radius: 0 20px 20px 0; 
} 
#topMenu .topleftmenuitem:hover { 
    border-radius: 20px 0 0 0; 
} 
and #topMenu .toprightmenuitem:hover { 
    border-radius: 0 20px 0 0; 
} 
#topMenu ul ul li:last-child { 
    border-radius: 0 0 20px 20px; 
} 

看到，當你將鼠標懸停在最後一個孩子它變成從彎曲到矩形，我只是想保持它總是彎曲。

Answer 1

您需要使用:last-of-type或:last-child僞

#topMenu > ul > li > ul > li:last-of-type a:hover { 
    border-radius: 0 0 20px 20px; 
    background: #f00; /* You can remove this, its just for a demo */ 
} 

Demo

---

上述選擇裝置，具有#topMenu的id選擇直接子ul到元，比選擇直接li到ul，移動進一步應用相同，最後，我們選擇最後的li孩子是嵌套在2級ul和我們應用樣式a:hover

Answer 2

我已經更新你的小提琴。你不需要像這樣打破所有的ul。請參閱我搗鼓簡單得多代碼：

http://jsfiddle.net/7mjEC/2/

唯一的CSS改變你真正需要的是在增加一個選擇：

ul ul li:last-child, 
ul ul li:last-child a { 
    border-radius: 0 0 20px 20px; 
}