CSS li hover without li：after

Question

我有菜单，我在哪里使用：在元素之后。我在菜单中徘徊，但是它在：元素之后徘徊。

HTML：

<ul class="main-menu">
    <li class="active"><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
</ul>

CSS：

/* MAIN MENU */
.main-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: url("../img/li.png") repeat-x; height: 56px;
}
.main-menu li {
    display: inline-block;
    color: #fff;
    height: 56px;
    background: url("../img/li.png") repeat-x; height: 56px;
    line-height: 56px;
}
.main-menu li:after {
    content: "|";
}
.main-menu li:last-child:after {
    content: "";
}
.main-menu li:hover {
    background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu .active {
    background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu li a {
    text-decoration: none;
    color: #d2eff3;
    padding: 10px;
}
.main-menu li a:hover {

}

的jsfiddle：

JsFiddle example

问题：

如何从悬停效果中排除li:after元素？

（菜单悬停效果悬停在“|”分隔符下。我想在分隔符下禁用悬停）

我试过了：

.main-menu li:after:hover {
    background: none;
}

但没有运气。

感谢您的回答。

Answer 1

我认为悬停效果应该在链接上而不是整个li元素http://jsfiddle.net/krasimir/fC8sb/6/

.main-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: url("...") repeat-x; height: 56px;
}
.main-menu li {
    padding: 0;
    margin: 0;
    display: inline-block;
    color: #fff;
    height: 56px;
    background: url("../img/li.png") repeat-x; 
}
.main-menu li:after {
    padding: 14px 0 0 4px;
    content: "|";
    float: right;
    display: block;
}
.main-menu li:last-child:after {
    content: "";
}
.main-menu li:hover a {
    background: url("...") repeat-x; height: 56px;
}
.main-menu .active {
    background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu li a {
    text-decoration: none;
    color: #d2eff3;
    padding: 10px;
    display: block;
    float: left;
    padding: 16px 10px 10px 10px;
}

Answer 2

将:after元素放在li之外。我在示例中通过添加以下代码来完成此操作：

li {
    position:relative;
}

li:after {
    position:absolute;
    right:-3px;
}

请参阅：http://jsfiddle.net/fC8sb/1/

Answer 3

应用这样的样式：

.main-menu li:hover::after  {
    background:red;
}

FIDDLE

Answer 4

向position: relative;添加left: a和li:after，以便将：after元素移离li框。

接下来，向margin-right: a*2添加一些li，以便li:after元素不会只移到下一个menu-item。

希望有所帮助。

修改 - 只是为了确保：用数字替换a和a*2，是吗？