Con l'aiuto di un codice HTML competente e di semplici regole CSS, puoi creare un menu a comparsa, integrarlo e modificarlo. Utilizzando le tabelle a cascata e gli strumenti del linguaggio di markup, puoi assicurarti che il menu stesso funzioni correttamente in tutti i browser.
Istruzioni
Passo 1
Tieni prima la barra dei menu di base. Crea un elenco numerato speciale con un sottomenu in un editor di testo. Di solito "Blocco note" viene utilizzato per questi scopi. Il sottomenu funge da elemento dell'elenco padre. Ad esempio: Primo elementoElemento di inondazioneElemento di inondazione2Elemento di campo3Elemento di campo4Elemento di campo5
Passo 2
Salva questo elenco in un file html separato. Quindi creare un file.css. Immettere tutti i parametri del foglio di stile richiesti. Fallo con molta attenzione, perché un errore e il menu a comparsa non verranno visualizzati correttamente o non funzioneranno affatto.
Passaggio 3
Rimuovi tutti i punti elenco e il riempimento applicati nell'elenco puntato. Imposta la larghezza del menu utilizzando gli strumenti CSS: ul -style: none; width: 200px; }
Passaggio 4
Segna la posizione relativa di tutti gli elementi della lista con un attributo chiamato position: ul li: relative; }
Passaggio 5
Quindi disponi il sottomenu, i cui elementi appariranno dal menu principale a destra quando il cursore del mouse è sopra l'elemento: li ul: assoluto; sinistro: 199px; top: 0; display: nessuno; }
Passaggio 6
L'attributo di sinistra è un pixel in meno rispetto alla larghezza del menu stesso. Ciò consente di posizionare correttamente gli elementi popup senza creare bordi doppi. L'attributo di visualizzazione viene utilizzato per nascondere il sottomenu all'apertura della pagina.
Passaggio 7
Stile i collegamenti secondo necessità utilizzando le opzioni CSS appropriate. Includere il parametro display: block in modo che i collegamenti occupino tutto lo spazio a loro riservato. Per far apparire il menu quando il cursore del mouse ci passa sopra, inserisci il seguente codice: li: hover ul: block; }
Passaggio 8
Imposta opzioni aggiuntive per la visualizzazione di elementi dell'elenco e collegamenti come desiderato. Includere un attributo nel file.html. Il menu a comparsa è pronto per l'uso.
