pure CSS dropdown not working properly

Question

i tried making a simple css dropdown menu which is not working as expected. the dropdown should appear when i hover the pointer on "menu1" .here is the link to the fiddle . Moreover i am bit frustrated with this piece of css code(i think this should be the code which will give me the desired output but why it is not working)

#nav ul li:hover ul

however if i replace it with

#nav ul:hover ul

it works but not as expected.

Answer 1

Just add > in your code as follows:

#nav ul li:hover ul

Change into:

#nav ul > li:hover ul

When you would like to create sub menu, the structure should be like this:

<li><a href="#">parent-menu</a></li>
<li><a href="#">parent-dropdown-menu</a>
    <ul>
        <li>........</li> <!--child-->
    </ul>
</li>

See the little changes here: DEMO

Answer 2

You need to put the sub menus inside the parent li:

<div id="nav">
    <ul>
        <li><a href="">menu0</a></li>
        <li class="main">
            <a href="">menu1</a>
            <ul>
                <li class="sub"><a href="">menu2</a></li>
            </ul>
        </li>
    </ul>
</div>

http://jsfiddle.net/F3Qg3/39/