0

これをコーディングして、アクティブ リーとホバー リーが通常のリーの上に表示されるようにします。しかし、何が起こるかというと、ホバーするとアクティブな 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 に答える