0

このためにjsFiddleを作成しました。私がやろうとしているのは、サブメニューに移動すると、親のアイテムの周りにパディングが保持されることです。現在, li にカーソルを合わせると, パディングが見えます.

私のCSSは次のとおりです：

#access {
    margin-top: 45px;
}

#access ul#menu-top_nav {
    margin:0 0 10px 15px;
}

#access ul#menu-top_nav li {
    font-size: 15px;
    position: relative;
    display: inline-block;
}

#access ul#menu-top_nav li a {
    color: #336c82;
    padding: 10px;
}

#access ul#menu-top_nav ul {
    display: none;
}

#access ul#menu-top_nav li a:hover {
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

#access ul#menu-top_nav li:hover > ul {
    display: block;
    position: absolute;
    top: 30px;
    left: -25px;
    background: #336c82;
}

#access ul#menu-top_nav ul.sub-menu li {
    display: block;
    width: 200px;
    padding: 10px;
}

#access ul#menu-top_nav ul.sub-menu li a {
    color: #fff;
    padding: 0;
}

#access ul#menu-top_nav ul.sub-menu li a:hover {
    padding: 0;
    text-decoration: underline;
}

私のHTMLは次のとおりです。

<div role="navigation" id="access">
<ul id="menu-top_nav" class="menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17" id="menu-item-17">
        <a href="#">Our Business</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73" id="menu-item-73"><a href="#">About Us</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72" id="menu-item-72"><a href="#">Careers</a></li>
        </ul>
    </li>
</ul>
</div>

しかし、サブメニューにさらに進むと、ホバー効果が消えます。

親の li が常に有効になるようにするにはどうすればよいですか?

前もって感謝します。私が適切に説明したことを願っています。

4

2 に答える 2

2

#access ul#menu-top_nav li a:hoverに変更#access ul#menu-top_nav li:hover a

    #access ul#menu-top_nav li:hover a{
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

デモ

ここにCSSドロップダウンメニューの詳細な例があります。

于 2013-01-30T10:38:08.687 に答える
1

これは、マウスがドロップダウンの子メニューにある間、親メニューをホバーしたままにする方法の複製のように見えます

とにかく、ホバー擬似クラスをオンにしますli-変更

#access ul#menu-top_nav li a:hover {
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

に：

#access ul#menu-top_nav li:hover a {
    background: #336c82;
    color: #fff;
    text-decoration: none;
}
于 2013-01-30T10:38:14.083 に答える