menu {

Con un po 'di codice HTML, puoi aggiungere un menu a discesa al tuo sito.

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