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

Question

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

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

我想要做的是在悬停时设置下拉按钮底部 0px 边框半径，但仅在下拉菜单上设置。

我试过了，但它不起作用，我知道我做的不对：

#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

>您可以使用（子选择器）定位元素。

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

这将在结束时专门从#nav到孩子li，到孩子a。