Creiamo un menu Orizzontale in Css

li 2013-02-25 | Blog | Css | a cura di Web Designer Stefano Sinesi
Creiamo un menu Orizzontale in Css
Cominciamo dall'HTML, il codice per mettere in piedi la nostra struttura:
< ul class="menu">
< li>< a href="#">Link 1< /a>< /li>
< li>< a href="#">Link 2< /a>< /li>
< li>< a href="#">Link 3< /a>< /li>
< li>< a href="#">Link 4< /a>< /li>
< /ul>
Inseriamo adesso i CSS. Ricordate di aprire il TAG style correttamente:
< style type="text/css" >... < /style>
Non dimenticare l'attributo type che potrebbe generare un errore nel W3C.
Ecco il Css:
ul.menu { width: 900px; list-style: none; }
ul.menu li { float: left; width: 100px; border: 1px solid #333;}
ul.menu li a, ul.menu li a:hover { color: #000; text-decoration: none; }
ul.menu li a:hover { color: #000; text-decoration: underline; }
La mia conclusione
Con queste poche righe di codice, potete creare già la struttura del vostro menu.
Qui di seguito vi lascio una prova da me creata durante questo percorso.
Demo menu orizzontale in Css
ul.menu_test { width: 600px; list-style: none; }ul.menu_test li { float: left; width: 100px; border: 1px solid #333; margin:
4px; font-size:11px; text-align:center; background-color:#e8e8e8}
ul.menu_test li a, ul.menu_test li a:hover { color: #000; text-decoration: none; }
ul.menu_test li a:hover { color: #000; text-decoration: underline; background-color:#cccccc; }
Link 1Link 2Link 3Link 4
Fonte articolo: www.webextreme.it/webdesigner/stefano.sinesi/creiamo_un_menu_orizzontale_in_css.htm
www.webextreme.it