Question

I’m working on a simple nav bar with a drop-down menu on hover using the visibility property. But when I hover, the condition does not take effect. What is the logic behind this?

http://jsfiddle.net/MAvQp/

Answer 1

You are trying to make the subitems visible with

ul li:hover ul{
    visibility: visible;
}

but the subitems ul is not nested inside an li, so ul li ul does not match the subitems. Therefore, change your html to something like

<ul>
    <li>Menu Item 1 
            <ul>
            <li>Sub-Menu1 Item 1</li>
            <li>Sub-Menu1 Item 2</li>
            <li>Sub-Menu1 Item 3</li>
            </ul>
    </li>
…

</ul>

please also see my forked fiddle.