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

【问题标题】：CSS Menu with border-radius on hover悬停时带有边框半径的 CSS 菜单
【发布时间】：2012-06-04 07:48:30
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以使用> (Child selector) 定位元素。

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

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

【讨论】：