对于带有圆角的CSS3菜单，我遇到了一些问题，我不确定这是否是我应用导致我的问题的类的方式。请注意，在下面的示例中，我省略了代码的-moz-和-webkit-变体以节省空间，但它们存在于我的代码中。
我有一个包含自定义<div>菜单的<ul>标记，以允许下拉功能，并且还使用li:hover突出显示所选的菜单。并且，有史以来第一次（根据我的经验），IE实际上第一次完美无缺，而Firefox和Chrome需要进行一些调整。
我的最左边菜单项的li:hover状态出现了问题，因为当它悬停时它会偏离角落，然后在'mouseout'之后它也会影响border-radius包含<ul>标记。我能够通过先将border-radius应用于div标签然后隐藏溢出来解决问题，但是当菜单项包含下拉列表时，它们没有显示。因此，我将左侧菜单项设置为menu_end，并设置border-top-left-radius和border-bottom-left-radius的{{1}}和li以匹配li:hover border-radius标签，我认为已解决了这个问题。
<ul>但是，我注意到在.menu_end {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.menu_end li:hover {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
状态下创建的子菜单也继承了左圆角的这些样式，我似乎无法清除它们。我试过添加：
li:hover由于某种原因不起作用。我还尝试将嵌套的.menu_end ul li ul li{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.menu_end ul li ul li:hover {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
元素分配给他们自己的类：
<li>这两种方法似乎都不起作用，奇怪的是如果我在不指定位置的情况下将样式应用于.menu_end_drop li {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.menu_end_drop li:hover {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
，它会影响两个先前未指定的角落，但不影响左上角和左下角。
我认为这可能与我的风格顺序有关，但我的理解是，以后在css文件中应用的样式会取代以前的任何样式，所以我有点亏本！
我把所有东西都包括在这个小提琴中 - ＆gt; http://jsfiddle.net/Z5qWe/2/
非常感谢任何帮助，
祝福，
乔
答案 0 :(得分：5)
问题在于：
.menu_end li:hover {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
这应该仅适用于直接后代（因此我们使用>）。
替换为：
.menu_end > li:hover {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}