Menu Orizzontale in CSS con Sotto Menu

Un semplice menu orizzontale in CSS

La prima cosa da fare è aggiungere una ibreria jQuery

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>

Richiamare lo stile, dove possiamo andare a modificare l’aspetto del menu

<link rel="stylesheet" href="styles.css">

ed infine il codice html per creare la struttura del menu

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li>a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span><Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Un menu abbastanza semplice con un contenitore impostato con id cssmenu, id che contiene lo stile del contenitore del menu ovvero i tag li ul, un tag li con class has-sub che attiva il sub menu, la proprieta active ci viene fornita da jQuery che ci serve per attivare il sotto menu.

Esempio

Scarica Menu