Creare il foglio di stile

Se vuoi che il menu vada in un file HTML autonomo, devi creare uno spazio tra i tag e dove andrà il codice CSS. Scrivi quanto segue nel tuo file.

Lo spazio tra queste due etichette è il tuo foglio di stile. Se si utilizza un file CSS separato, aggiungere quanto segue nei tag "head":

Quindi crea un file chiamato "style.css", che sarà il tuo foglio di stile. Mantieni il foglio di stile nella stessa directory del file HTML principale.

Creare il menu

È necessario creare un'etichetta che contiene per il menu per andare al loro interno. Aggiungi quanto segue alla tua pagina HTML nella posizione in cui vuoi che il menu vada:

Quindi è necessario definire il separatore di menu. Aggiungi il seguente codice al tuo foglio di stile:

menu {

larghezza: 200 px; }

Aggiungi a questa voce qualsiasi altro stile CSS che desideri che il divisore abbia; ad esempio, un colore di sfondo, bordi o una dimensione diversa.

Markup HTML

Aggiungi il codice per il menu. Il menu utilizzerà una lista non ordinata:

. Aggiungi il seguente codice tra le etichette per il tuo menu.
• Voce di menu 1
  • Sottomenu Elemento 1
  • Sottomenu Elemento 2

Si noti che le etichette

dei sottomenu sono tra le etichette
• e
per "Elemento 1 del menu". Questo dice al browser che il sottomenu è contenuto sotto quella voce di menu. Adatta il codice precedente per rappresentare il tuo menu, aggiungendo i tuoi URL e sottomenu aggiuntivi, se necessario

Stile CSS

A questo punto comparirà il menu ma verrà sempre visualizzato il sottomenu. Hai solo bisogno di usare l'attributo "display" per nascondere e rivelare il sottomenu. Aggiungi quanto segue al tuo foglio di stile:

menu li {position: relative;}

menu ul ul {

posizione: assoluta; inizio: 0; a sinistra: 100%; larghezza: 100 px; } div # menu ul ul {display: none;} div # menu ul li: hover ul {display: block;}

Salva tutti i file. Il tuo menu a discesa è pronto.

riferimenti

• Tanfa.co.uk: Tutorial menu pop-up CSS (tutorial menu a discesa CSS)

Altri articoli

• Come creare un menu a discesa orizzontale in HTML
• Come rimuovere tutti gli stili CSS per un singolo DIV
• Come ridurre lo spazio tra le righe in HTML
• Come inserire due immagini orizzontalmente con HTML
• Come sovrascrivere CSS nelle classi DIV
• Come ancorare un DIV nella parte inferiore di una pagina
• Come creare una linea verticale che separa il testo HTML da un'immagine