CSS - 李背景

Question

我想要编码，以便活动和悬停li出现在正常li上。但是，悬停和活跃的李会出现在正常李的内部。当我添加填充（悬停和活动li）以尝试复制正常li的大小时，正常的li仍然可见，并且只是通过悬浮和活动li的增加填充来扩展，并且不会覆盖，因为我需要它。

这里是我的CSS：

/* ** * ** * ****水平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：悬停选择就可以了，或者你必须使用JavaScript。