0

Webページの垂直ドロップダウンメニューを作成しています。リンクにカーソルを合わせると、正常に動作し、指定どおりに色が変わります。しかし、liがサブレベルのリスト（コード内の「テキストb」と「c」）を持っていることを右に移動すると、元の色に戻ります。この問題を解決するにはどうすればよいですか？

HTMLマークアップ：

<div id="vertical-menu">
    <ul class="top-level">
        <li><a href="#">Some text A</a></li>
        <li>
            <a href="#">Some text B</a>
            <ul class="sub-level">
                <li><a href="#">RSVP</a></li>
                <li><a href="#">Organizing Team</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Some text C</a>
            <ul class="sub-level">
                <li><a href="#">Events</a></li>
                <li><a href="#">Reunions</a></li>
            </ul>
        </li>
    </ul>
</div>​

CSSスタイル：

#vertical-menu {
    padding: 10px 0;
    margin: 0 -14px;
    width: 250px;
}
#vertical-menu li {
    list-style: none;
    position:relative;
}
#vertical-menu a {
    padding: 10px;
    margin-right: 0;
    display: block;
    background: -webkit-gradient(linear, left top, left bottom, from(#CD0000),           to(#8B0000));
    color: #FFFFFF;
    font-size: 1.05em;
}
#vertical-menu a:hover {
    background: url("Wood Texture 2.jpg") 100% 100%;
    color: #8B0000;
}
ul.sub-level {
    display:none;
    position:absolute;
    left:171px;
    top: 0;
}
.sub-level a {
    width: 200px;
}
li:hover .sub-level {display: block;}

jsfiddleのデモを見るには：http：//jsfiddle.net/fFzeS/

4

1 に答える 1

3

( demo )#vertical-menu li:hover > aの代わりに使用#vertical-menu a:hover

編集：

ここでの本当の問題は、サブメニューがベース メニューと重なっていることです。UL からパディング/マージンを削除する必要があります。

.vertical-menu ul { margin: 0; padding: 0; }

を調整left:171px;しますleft:250px;

于 2012-12-08T11:44:46.833 に答える