Question

Could some one explain me how CSS drop downs works?

I’ve seen alot of them, most of them has the > selector,

My question is:

How can you make CSS dropdown with the > selector?

I looked towards a lot of tutorials and never understood what does the > do and how does it connects with the HTML classes\Ids.

Could someone explain me that, part by part?
Thank you.

Answer 1

HTML:

<ul class="menu">
    <li>        
        <span>menu 1</span>
        <ul>
            <li><a href="#" >Sub 1-1</a></li>
            <li><a href="#" >Sub 1-2</a></li>
            <li><a href="#" >Sub 1-3</a></li>
        </ul>
    </li>
    <li>        
        <span>menu 2</span>
        <ul>
            <li><a href="#" >Sub 2-1</a></li>
            <li><a href="#" >Sub 2-2</a></li>
            <li><a href="#" >Sub 2-3</a></li>
        </ul>
    </li>
</ul>

css:

ul.menu>li{ /*Only direct children*/
    float:left;
    width: 60px;
}
ul.menu li ul{
    display:none; /*not visible*/
}

ul.menu li:hover ul{
    display:block; /* visible when hovering the parent li */
}

Explanation is in the css.

Demo:
http://jsfiddle.net/FH7Z3/