边框半径仅在下拉菜单的底部

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; 
}