CSS - li背景

Question

我想对此进行编码，以便主动和悬停的li出现在正常的li上。但是发生的事情是悬停和活跃的li出现在正常的li里面。当我添加填充（悬停和活动的li）以试图复制正常li的大小时，正常的li仍然可见并且只是通过悬停和活动li的增加填充扩展而不覆盖，因为我需要它

这是我的CSS：

/ * ** * ** * **** HORIZONTAL NAVS 的 * ** * ** * **** /

.menu-horizontal {
    margin: 3px 2px 0.75em;
}
.menu-horizontal ul.top-level {
    background-color: #FFFFFF;
    clear: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu-horizontal ul.top-level li {
    background: #FEAB27;
    border-radius: 7px 7px 0px 0px;
    display: inline-block;
    height: 28px;
    padding: 0 25px;
}
.menu-horizontal ul.top-level {
    display: inline-block;
    float: left;
    height: 23px;
    margin-left: 173px;
    padding-top: 5px;
    text-align: center;
    text-transform: none;
}

.menu-horizontal ul.top-level li a {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    display: inline-block;
    line-height: 24px;
    text-decoration: none;
    font-family: Verdana,'Magra','Gafata',sans-serif;
    font-size: 102%;
    font-weight: bold;
}
.menu-horizontal ul.top-level li.selected a, .menu-horizontal ul.top-level li a:hover {
    background: #FDCC00;
    border-radius: 7px 7px 7px 7px;
    text-decoration: underline;


}
.menu-horizontal li ul.second-level {
    display: block;
    left: -999em;
    margin: -1000px 0 0;
    overflow: visible;
    padding: 0 0 9px;
    position: absolute;
    text-align: left;
}

.menu-horizontal li:hover ul.second-level, .menu-horizontal li.hover ul.second-level {
    left: auto;
}

谢谢！

Answer 1

我不确定我的问题是否正确，但你想要这样的事吗？

.menu-horizontal ul.top-level li.selected, .menu-horizontal ul.top-level li:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
}

.menu-horizontal ul.top-level li a:hover, .menu-horizontal ul.top-level li.selected a {
text-decoration: underline;
}

http://jsfiddle.net/svSwA/

如果您想将另一个元素更改为A，则必须将：hover选择器放在其上，或者您必须使用JavaScript。