3

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

我有一个<div>包含自定义<ul>菜单的标签，以允许下拉功能，并且还li:hover用于突出显示所选菜单。而且，有史以来第一次（以我的经验），IE 第一次真正完美地运行，而 Firefox 和 Chrome 需要一些调整。

我的最左侧菜单项的状态存在问题li:hover，因为当它悬停时，它与角落对齐，然后在“mouseout”之后它也影响border-radius了包含<ul>标签的。我能够通过border-radius首先将 应用于 div 标签然后隐藏溢出来解决此问题，但是由于菜单项包含下拉列表，因此它们没有被显示。因此，我将左侧菜单项设置为 class of menu_end，并将border-top-left-radiusandborder-bottom-left-radius的liand设置为与标签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/

任何帮助是极大的赞赏，

最好的祝愿，

乔

4

1 回答 1

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

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

于 2013-03-06T11:01:22.350 回答