Come visualizzare il sottomenu nascosto in frontale di un elenco a discesa

August 11

In genere nascondere i sottomenu di un menu CSS alla vista utilizzando il CSS di proprietà "display" per impostare l'elemento di sottomenu come nascosti. È quindi possibile chiamare il sotto-menu indietro alla vista utilizzando la pseudo-funzione "hover", che cambia la proprietà "display" torna a un valore visibile, come ad esempio "blocco". Al fine di evitare che l'elemento di sottomenu di apparire sotto il menu CSS e altri elementi della pagina, come elenchi a discesa, è necessario definire la proprietà CSS "z-index" per dare l'elemento sottomenu un ordine di sovrapposizione posizione.

istruzione

1 Aprire il documento pagina Web che contiene il CSS codice di stile del menu in un editor HTML o testo.

2 Individuare il codice lo stile del menu di CSS. menu CSS sono costituiti da una serie di liste non ordinate nidificate che sono in stile con i CSS facendo riferimento alla "ul" e nomi di elementi "li". principali pulsanti di navigazione del menu CSS appaiono nel primo livello di "ul" e gli elementi "li". Ad esempio, "ul {float: left; margin: 0; padding: 0; z-index: 1;}".

3 Individuare il codice CSS che controlla l'elemento di stile sottomenu. Questo codice nasconde l'elemento di sottomenu definendo proprietà "visualizzazione" lista di articoli non ordinata del sottomenu come nascoste o "nessuno". Ad esempio, "ul li {display: none;}".

4 Fare clic per posizionare il cursore a destra del "display: none;" testo e premere "Barra spaziatrice".

5 Digitare la seguente riga di codice:

z-index: 5000;

Questa riga di codice definisce la posizione nell'ordine di impilamento del sotto-menu come superiore alla posizione di ordine di sovrapposizione del menu principale, che causerà il sottomenu per visualizzare davanti al menu e altri elementi della pagina nella zona in cui la sottomenu elemento visualizzato.

6 Fare clic per posizionare il cursore alla fine del sottomenu codice elemento di stile, alla sinistra del simbolo "}", e premere "Invio" per creare una riga vuota.

7 Digitare la seguente riga di codice e premere "Invio".

li: hover ul {display: block; }

Questo definisce il "hover" pseudo-classe dei pulsanti di navigazione principali in relazione all'elemento sottomenu. Il "display: block;" immobili ridefinisce proprietà display del sottomenu come visibile. Questo fa sì che l'elemento di sottomenu per visualizzare sullo schermo quando si passa sopra il pulsante di navigazione del menu di CSS con il cursore del mouse.

8 Fare clic sul menu "File" e fare clic su "Salva".