悬停时带边框半径的CSS菜单

Question

也许这是一个简单的解决方案，但我坚持认为。

这里我有我的代码http://jsbin.com/ejomuv纯CSS菜单

我想要做的是在悬停时设置下拉按钮底部0px border-radius，但仅在下拉菜单上设置，而不是全部。

我试过了，但它没有用，我知道我做的不对：

#nav li a .nav-dropdown:hover {
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px;
}

Answer 1

由于带有下拉菜单的锚标记使用的是action而不是href，因此您可以使用以下选择器：

#nav > li:hover > a[action]{
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px;  
}

工作示例：http://jsbin.com/ejomuv/7/

Answer 2

如果引用是正确的（由于缺少HTML而无法分辨），它应该可以正常工作。但我认为这正是问题所在。也许尝试在你的陈述中添加一个！important标志，看看是否有帮助。

Answer 3

您可以使用>（Child selector）来定位元素。

#nav > li:hover > a {
    border-radius: 6px 6px 0 0;
}

这将特别从#nav发送给孩子li，当他们结束时，会发送给孩子a。