0

我想对此进行编码，以便活动和悬停的 li 出现在正常的 li 上。但是发生的是悬停和活动 li 出现在正常 li 内。当我添加填充（以悬停和活动 li 的）以尝试复制正常 li 的大小时，正常 li 仍然可见，并且只是通过增加悬停和活动 li 的填充来扩展，并且没有被覆盖，因为我需要它是.

这是我的CSS：

/ * ** * ** * ****水平导航* ** * ** * **** /

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

谢谢！

4

1 回答 1

0

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

.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。

于 2012-12-17T20:21:04.550 回答