CSS drop down explanation

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

It is used to select direct children.

Consider following markup

<div id="container">  
   <ul>  
      <li> List Item  
        <ul>  
           <li> Child </li>  
        </ul>  
      </li>  
      <li> List Item </li>  
      <li> List Item </li>  
      <li> List Item </li>  
   </ul>  
</div>  

A selector of #container > ul will only target the uls which are direct children of the div with an id of container.

It will not target, for instance, the ul that is a child of the first li.

For this reason, there are performance benefits in using the child combinator.

Answer 2

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/