使用CSS的下拉菜单不会在悬停时显示菜单

Question

I am trying to get a dropdown menu to appear when the user hovers over the About menu, see http://jsfiddle.net/bpAbC/

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;
}

The .sub ul is not displaying when I hover over About. I assume I have made an error with my last two rules but I can't work it out.

Answer 1

You need to change selector to nav > ul > li:hover ul.sub because ul.sub is not a child of a

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

http://jsfiddle.net/bpAbC/1/

Answer 2

Try this:

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

And letme know if it worked

Answer 3

Where you have

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

in your CSS, try

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

The "+" between a:hover and ul.sub specifies that you want to select an adjacent sibling of the <a> . I think this is preferable because it is more specific about exactly which element you are selecting.