0

ユーザーがメニューにカーソルを合わせたときにドロップダウンメニューを表示しようとしています。 http://jsfiddle.net/bpAbC/Aboutを参照してください

HTML:

<nav>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
            <ul class="sub">
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>

CSS:

nav > ul {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
}

nav > ul > li {
    display: table-cell;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

nav > ul > li a {
    color: red;
}

nav > ul > li > ul.sub {
    display: none;
}

nav > ul > li a:hover ul.sub {
    display: block;
}

[ .subAbout] にカーソルを合わせると、ul が表示されません。最後の 2 つのルールで間違いを犯したと思いますが、解決できません。

4

3 に答える 3

0

あなたが持っている場所

nav > ul > li a:hover ul.sub { display: block; }

あなたのCSSで、試してください

nav > ul > li a:hover + ul.sub { display: block; }

との間の「+」は、 の隣接する兄弟を選択することa:hoverをul.sub指定します。選択している要素を正確に特定できるため、これが望ましいと思います。<a>

于 2013-04-18T14:07:40.293 に答える
0

これを試して：

nav > ul > li:hover ul.sub {
    display: block;
}

そして、それがうまくいったかどうか教えてください

于 2013-04-18T14:05:04.417 に答える