CSS 导航舍入最后一个 child

Question

好吧，这就是奇怪的地方。我的水平导航中的最后一个 child 有圆边。使用nav ul li:last-child a:hover，我能够让最后一个 child 的悬停状态也有圆边。然而，这是一个下拉。当我向下移动到它的子菜单时，父子菜单失去了圆边，而这个子菜单的子菜单现在有了圆边(他们不应该这样)。

看看我在说什么。

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 Travel 上

http://jsfiddle.net/XBUzw/

Answer 1

Demo

你好，现在替换成这个

    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 
} 

Live Demo

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

Updated Demo 我想你想要这个

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

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

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