html - 带边框半径和 li 的 CSS3 li 菜单 :hover

Question

我在使用带圆 Angular 的 CSS3 菜单时遇到一些问题，我不确定是否是我应用类的方式导致了我的问题。请注意，在下面的示例中，我省略了 -moz-。和 -webkit-代码的变体以节省空间，但它们存在于我的代码中。

我有一个 <div>包含自定义 <ul> 的标签菜单，允许下拉功能，我也在利用 li:hover突出显示所选菜单。而且，有史以来第一次(以我的经验)，IE 第一次实际上运行完美，而 Firefox 和 Chrome 需要一些调整。

我遇到了 li:hover 的问题我最左边的菜单项的状态，当它悬停在 Angular 落时它会变成方形，然后在“mouseout”之后它也会影响 border-radius包含 <ul>标签。我能够通过应用 border-radius 来解决问题。首先到一个 div 标签，然后 overflow hidden ，但是由于菜单项包含下拉列表，它们没有被显示。因此，我将左侧菜单项设置为 menu_end 类并设置 border-top-left-radius和 border-bottom-left-radius的 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 中创建的子菜单状态也继承了这些带有圆 Angular 左 Angular 的样式，我似乎无法清除它们。我试过添加:

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

这两种方法似乎都不起作用，奇怪的是，如果我只将样式应用于 border-radius如果不指定位置，它会影响两个先前未指定的 Angular ，但不会影响左上角和左下角。

我认为这可能与我的样式顺序有关，但我的理解是，稍后在 css 文件中应用的样式会取代之前的任何样式，所以我有点不知所措!

我已将所有内容包含在这个 fiddle 中 -> http://jsfiddle.net/Z5qWe/2/

非常感谢任何帮助，

最良好的祝愿，

乔

Answer 1

这个问题是因为:

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

fiddle :http://jsfiddle.net/Z5qWe/5/