Come realizzare un menu a discesa orizzontale con il CSS

Nella seguente pratica e rapida guida che vi esplicherò nei passaggi successivi, vi spiegherò specificatamente come si deve realizzare un menu a discesa orizzontale, soltanto utilizzando il foglio di stile (CSS) per il vostro bellissimo sito internet. L'esempio che vi illustrerò a breve è abbastanza semplice da comprendere e quasi banale, ma vi permetterà di arricchirlo facilmente rendendolo veramente unico; inoltre, esso non prevede i dettagli relativi alla forma del menù: lo stile del testo ed i colori non vengono trattati per potervi consentire di personalizzarlo a vostro piacere!!!

• Conoscenza del codice "html"
• Conoscenza del codice "CSS"

Innanzitutto, cominciamo immediatamente nel vedere il codice html (HyperText Markup Language) relativo alle voci del menù principale ed a quelle dei sottomenù riguardanti ciascuna voce sempre del menù basilare: precisamente, quest'ultimo sarà costituito semplicemente da elenchi puntati (come, ad esempio, "Gelati Frutta Creme Torte Paradiso Tiramisù Sbriciolata").

Successivamente, con riferimento ai dettagli del vostro Cascading Style Sheets (ovvero foglio di stile), le facili operazioni che dovrete compiere sono le seguenti: inserire, nel "CSS", il codice html "#menu, #menu ul{ list-style: none ;}" (per eliminare il punto agli elenchi puntati) e "#menu ul{ display: none ; position: absolute;}" (per rendere invisibili i sottomenù); introdurre, sempre nel "CSS", la regola "#menu li: hover ul{ display: block;}" (per rendere visibile un sottomenù soltanto quando con il mouse passate sulla rispettiva voce del menù principale.

Per poter effettuare la correzione dei problemi di disposizione in linea (che saranno sicuramente esistenti, poiché l'eliminazione della visualizzazione del punto degli elenchi puntati determina un allineamento non corretto per il vostro obiettivo), nel foglio di stile, sarete obbligati ad inserire le regole "#menu li{ float: left; position: relative; width:120px;}" e "#menù ul li{ float: none;}": esse vi serviranno appunto per allineare a sinistra solamente le voci del menù principale.

Cosi facendo, il vostro menù avrà acquistato le caratteristiche fondamentali di un comune menù a discesa orizzontale. Arrivati a questo punto, avrete la possibilità di divertirvi ad arricchire quest'ultimo con tutti i dettagli stilistici che preferite, tra cui i seguenti: il colore di sfondo delle svariate voci presenti (anche dei sottomenù); la tinta e la tipologia di carattere del testo; la dimensione dei box.

• CSS: GUIDA AL LAYOUT DEI MENU DI NAVIGAZIONE

• Come cambiare un attributo CSS tramite JavaScript
• Come centrare con CSS
• Come usare gli icon fonts con i CSS