CSS3 li菜单包含border-radius和li:hover

Question

我对带有圆角的CSS3菜单有一点问题,我不确定这是否是我应用导致我的问题的类的方式.请注意,在我的下面的示例中,为了节省空间,我省略了代码-moz-和-webkit-变体,但它们存在于我的代码中.

我有一个<div>包含自定义<ul>菜单的标签,以允许下拉功能,并且还li:hover用于突出显示所选的菜单.并且,有史以来第一次(根据我的经验),IE实际上第一次完美无缺,而Firefox和Chrome需要进行一些调整.

我的li:hover最左边菜单项的状态出现了问题,因为当它被徘徊时,它在角落后方,然后在'mouseout'之后它也影响border-radius了包含<ul>标签.我能够通过首先应用border-radiusdiv标签然后隐藏溢出来解决问题,但是当菜单项包含下拉列表时它们没有被显示.因此,我有一类设置左边的菜单项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状态下创建的子菜单也继承了左圆角的这些样式,我似乎无法清除它们.我试过添加:

.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没有指定位置的情况下应用样式,它会影响两个先前未指定的角,但不影响左上角和左下角.

我认为这可能与我的样式的顺序有关,但我的理解是,后来在css文件中应用的样式取代以前的任何样式,所以我有点亏本!

我把这一切都包括在内 - > 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;
}

小提琴:http://jsfiddle.net/Z5qWe/5/