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.