Menu a discesa: i link si allineano solo in orizzontale

[ivanisevic82]

Ciao a tutti, sto cercando di creare un menu a discesa, questo è il codice css che sto utilizzando:

.header__menu .menu-item {display: inline-block;}.header__menu .menu-item a {padding: 5px 10px; color:#fff; text-decoration: none;}
.header__menu .menu-item:hover .sub-menu { display: block; }
.header__menu .menu-item .sub-menu { display: none;  position: absolute; background-color: #111111; min-width: 160px; z-index: 1; }
.header__menu .menu-item .sub-menu a { display: block; color: #ffffff; background-color: #444444; text-decoration: none; padding: 12px 16px; }
.header__menu .menu-item .sub-menu a:hover { background-color: #777777; }

Nonostante abbia usato la funzione "display: block;", continuo a vedere le voci del menu allineate in orizzontale e non in verticale.

Dove sbaglio?

Grazie!

EDIT: Aggiungo una info importante.
Se provo questo codice in una pagina html normale, funziona correttamente, ad esempio qui:

https://www.w3schools.com/css/tryit....ropdown_button

Tuttavia su Wordpress mi allinea i link del sub-menu in orizzontale, no ne capisco il motivo.

[KillerWorm]

Tuttavia su Wordpress mi allinea i link del sub-menu in orizzontale, no ne capisco il motivo.

Ciao, è plausibile che le regole CSS già presenti nel resto del tuo wordpress influiscano in qualche sul tuo menu a prescindere da quelle che hai aggiunto.

Senza vedere la pagina in azione non è possibile capire come è impostato il resto del CSS e cosa sta avvenendo di preciso. Possibilmente posta il link della pagina (se è accessibile pubblicamente online) o di un esempio minimo riproducibile per il quale si possa esaminare il problema da te descritto, diversamente è pressoché impossibile darti aiuto.

funzione "display: block;"

Il termine corretto è "proprietà" CSS, non "funzione".

[ivanisevic82]

Ciao, è plausibile che le regole CSS già presenti nel resto del tuo wordpress influiscano in qualche sul tuo menu a prescindere da quelle che hai aggiunto.

Senza vedere la pagina in azione non è possibile capire come è impostato il resto del CSS e cosa sta avvenendo di preciso. Possibilmente posta il link della pagina (se è accessibile pubblicamente online) o di un esempio minimo riproducibile per il quale si possa esaminare il problema da te descritto, diversamente è pressoché impossibile darti aiuto.


Il termine corretto è "proprietà" CSS, non "funzione".

Purtroppo non posso linkare niente perché sto lavorando in locale con mamp.

Tuttavia credo di aver individuato il problema, anche se non ho ancora trovato la "cura".

In pratica io ho dato una classe al primo menu (UL), che ho chiamato "header__menu"; mentre è direttamente Wordpress ad assegnare una diversa classe al sottomenù, ovverosia "sub-menu".

Ora, i vari componenti della lista (LI) hanno anch'essi una classe assegnata da Wordpress ("menu-item").
Questa classe tuttavia rimane identica anche nei LI che vengono fuori dal secondo UL, ovverosia dal sub-menu.

Quindi potrei risolvere dando una specifica classe ai LI del sub-menu, ma non so come fare perché questa classe penso la dia in automatico Wordpress.

EDIT: ho la sensazione che il problema si possa risolvere lavorando su questo pezzo di codice che ho inserito nella testata dove c'è il menu:

      <?php /* Main Navigation */        wp_nav_menu( array(
          'theme_location' => 'header',
          'depth' => 3,
          'container' => false,
          'menu_class' => 'header__menu'
          )
        );
      ?>

Non saprei però dove mettere le mani...

[ivanisevic82]

Temo che la questione sia da risolvere lato php, apri li un topic.

Grazie!

[ivanisevic82]

Alla fine ho risolto con

.sub-menu li

e .

sub-menu li a

Era più semplice di quanto pensassi...

Grazie!

[KillerWorm]

Ottimo!