css - CSS 导航四舍五入最后一个孩子

Question

好的，这很奇怪。我的水平导航中的最后一个孩子有圆形边缘。使用 nav ul li:last-child a:hover，我能够让最后一个孩子的悬停状态也具有圆角边缘。但是，它是一个下拉菜单。当我向下移动到它的子菜单时，父子菜单失去了它的圆边，这个子菜单的子菜单现在有圆边（他们不应该这样做）。

看看我在说什么。

nav ul li:last-child, nav ul li:last-child a:hover {
    border-radius:0 10px 10px 0;
    -webkit-border-radius:0 10px 10px 0;
}

试试 jsFiddle

将鼠标悬停在 VIP 旅行上

http://jsfiddle.net/XBUzw/

Answer 1

演示

嗨，现在替换为这个

    nav ul li:last-child, nav ul li:last-child a:hover{
// here style 
}

进入这个

    nav ul li:last-child, nav ul li:last-child a{
//  here style 
} 

现场演示

----------------------

更新的演示我想你想要这个

------------

------------

下拉样式的Updated-of-Drop- Down

如果您的要求，只需添加此

nav ul > li > ul > li {
    display: block;
    width: 100%;
}
nav ul > li > ul li a {
    -moz-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
}

nav ul > li > ul > li a:hover{
border-radius:0;
    -webkit-border-radius:0;
}

Answer 2

只需使用更具体的规则，例如使用子选择器而不是后代。

nav > ul > li:last-child, nav > ul > li:last-child > a:hover {
    border-radius:0 10px 10px 0;
    -webkit-border-radius:0 10px 10px 0;
}

http://jsfiddle.net/mowglisanu/XBUzw/3/