Menu Drop Down simples com CSS

Neste post vou mostrar como fazer um simples menu CSS com sub-menus, sem qualquer necessidade de usar JavaScript.

HTML

 <ul class="menu">    
   <li>    
    <a href="#">Home</a>    
   </li>    
   <li><a href="#">Empresa</a>   
    <ul class="sub-menu">    
     <li>    
      <a href="#">Empresa 1</a>    
     </li>    
     <li>    
      <a href="#">Empresa 2</a>    
     </li>    
     <li>    
      <a href="#">Empresa 3</a>    
     </li>    
     <li>    
      <a href="#">Empresa 4</a>    
     </li>    
    </ul>    
   </li>    
   <li><a href="#">Sobre</a>   
   </li>    
   <li><a href="#">Noticias</a>   
    <ul class="sub-menu">    
     <li>    
      <a href="#">Noticias 1</a>    
     </li>    
     <li>    
      <a href="#">Noticias 2</a>    
     </li>    
     <li>    
      <a href="#">Noticias 3</a>    
     </li>    
     <li>    
      <a href="#">Noticias 4</a>    
     </li>    
    </ul>    
   </li>    
   <li>    
    <a href="#">Contato</a>    
   </li>    
  </ul>   

CSS

 ul.menu, ul.menu ul.sub-menu {  
   padding:0;  
   margin: 0;  
 }  
 ul.menu li, ul.menu ul.sub-menu li {  
   list-style-type: none;  
   display: inline-block;  
 }  
 ul.menu li a, ul.menu li ul.sub-menu li a {  
   text-decoration: none;  
   color: #fff;  
   background: #666;  
   padding: 5px;  
   display:inline-block;  
 }  
 ul.menu li {  
   position: relative;  
 }  
 /*sub menu*/  
 ul.menu li ul.sub-menu {  
   display:none;  
   position: absolute;  
   top: 30px;  
   left: 0;  
   width: 100px;  
 }  
 ul.menu li:hover ul.sub-menu {  
   display:block;  
 }  

Por padrão, o sub-menu é escondido usando display: none e mostrado apenas quando o cursor é passado sobre o item da lista principal (:hover).