CSS drop down menu :hover state doesnt seem to work

Question

I tried to make a drop down menu using css and the :hover state, but the submenu doesn't drop down when I hover over the first <li> Can someone help me?

jsfiddle.net/mpo2fq5z

Here is my html:

<div id="menu">
    <ul>
        <li>Menu</li>
        <ul>
            <li>Submenu</li>
            <li>Submenu</li>
            <li>Submenu</li>
        </ul>
        <li>Menu</li>
        <li>Menu</li>
    </ul>
</div>

And the accompanying CSS:

body {
    padding:0;
    margin:0;
    overflow-y:scroll;
    font-family:arial;
    font-size:18px;
    color:red;
}
#menu {
    background-color:#222;
}
#menu ul {
    list-style-type: none;
}
#menu ul li {
    display:inline-block;
    padding:15px;
}
#menu ul li:hover {
    background-color:black;
}
#menu ul li:hover ul {
    display:block;
}
#menu ul ul {
    display:none;
    position:absolute;
    background-color:#333;
    min-width:200px;
    margin-left: -15px;
    margin-top:15px;
    padding:0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

Answer 1

try this html, put ul inside li so it works as its child.

<div id="menu">
            <ul>
                <li>Menu
                    <ul>
                        <li>Submenu</li>
                        <li>Submenu</li>
                        <li>Submenu</li>
                    </ul>
                    </li>
                <li>Menu</li>
                <li>Menu</li>
            </ul>
        </div>

fiddle

Answer 2

The problem is that your selector says #menu ul li:hover ul. That states that your sub menu is inside the

element, although it is not. To fix that, simply insert the second inside the

<li>Menu
    <ul>
        <li>Submenu</li>
        <li>Submenu</li>
        <li>Submenu</li>
    </ul>
</li>

I also updated your JsFiddle with the correct solution.

Upvotes: 2