0

以下のコードに見られるように、CSS を使用して垂直メニューをやり直しています。 3 番目のサブメニュー。

ここで何が欠けていますか？

また、さまざまなハックを使用して、すべてのブラウザーで機能するように努めています。すべてのブラウザーではないにしても、ほとんどのブラウザーで機能させるにはどうすればよいですか?また、制限はどこにありますか?

以下は私が書いたcssです：

#nav li a {
    display:block;
    width:250px;
    height:30px;
    color:#FFF;
    background-color: #33b4d4;
    text-decoration:none;
    font-size:1em;
    line-height:1.8em;
    font-weight:bold;
    border:1px solid #000;
    text-indent:20px;
}

#nav li a:hover {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

#nav ul.menu {
    display:block;
    width:250px;
    margin:0;
    padding:0;
    list-style-type: none;
}
#nav ul.menu > li, #nav ul.menu ul > li , #nav ul.menu ul > li > ul > li {
    float: left;
    display:block;
    width:250px;
    height:30px;
    background-color: #33b4d4;
    text-indent:20px;
}
#nav ul.menu ul ul li {
  float: none;
}
#nav li > ul {
  display: none;
}
#nav li:hover > ul {
    position: absolute;
    display:block;
    width:250px;
    padding:0;
    margin-top:-22px;
    margin-left:220px;
}

そして以下がメニューです。

        <div id="nav">
            <ul class="menu">
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
            </ul>

変更してみました：

#nav li a:hover {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

に：

#nav ul.menu > li:hover a {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

ただし、親リンクはアクティブのままですが、すべてのサブ メニュー リンクも同時にアクティブになります。私は何が欠けていますか？

4

1 に答える 1

1

li:hover でリンクの色を変更する必要があります。

#nav li:hover > a {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

JSFiddle

于 2013-08-03T08:54:09.137 に答える