Numerosi siti web utilizzano sottomenu in barre di navigazione che sono nascosti fino a quando un utente passa il cursore su di loro. Ci sono due forme di questi menu: verticali e orizzontali. Mentre un menu a discesa può coprire fino contenuti quando appare, un secondo livello orizzontale evita questo problema. Creare un secondo menu livello con i CSS. L'aggiunta di questo al tuo sito richiede le autorizzazioni amministrative per accedere al Editor dei temi in WordPress. Una certa esperienza con HTML e CSS sarebbe necessario.

istruzione

1 Accedi al tuo pannello di controllo di WordPress. Clicca su "Aspetto" dalla barra dei menu a sinistra, quindi fare clic su "Editor".

2 Clicca su "style.css" dalla lista dei file sulla destra. Questo porta il file nell'area di modifica al centro dello schermo. Copia tutto il codice, poi incollarlo in un file di testo e salvarlo sul computer. Se si commette un errore, si dispone di un backup che è possibile utilizzare.

3 Aggiungere il seguente codice al file in una nuova riga nell'editor di WordPress:

ul # YourMenu arco li {

padding-top: 0px;

padding-bottom: 0px;

display: none;

position: absolute;

top: 35px;

left: 0;

width: 100%;

}

ul # YourMenu li: arco hover {display: block; }

ul # YourMenu li arco a {display: inline; }

4 Sostituire "YourMenu" con il nome del primo menu di primo livello, e alterare i due attributi "padding" e l'attributo "top" per posizionare il menu in cui si desidera. Fare clic sul pulsante "Salva file" quando hai finito.

5 Clicca su "header.php" dalla lista dei file sulla destra. Creare un backup del file.

6 Scorrere verso il basso e individuare il primo livello della barra dei menu. Per ogni elemento della lista che si desidera creare un sotto-menu, aggiungere un tag <span> all'interno dei tag <li> dell'elemento, quindi aggiungere tutti gli elementi della lista che si desidera tra la campata. Il prodotto finale per ogni sotto-menù sarà simile a questa:

<Li>

<a href="#"> Menu Opzione 1 </a>

<Span>

<a href="#"> Second Tier collegamento 1 </a>

<a href="#"> Second Tier collegamento 1 </a>

<a href="#"> Second Tier collegamento 1 </a>

</ Span>

</ Li>

7 Sostituire "#" con gli indirizzi URL per i link, e dare i nomi voci di menu. Ripetere questa operazione per tutti i sub-menu che si desidera creare. Fai clic su "Salva modifiche" quando hai finito.