Problema allineamento voci sotto menu

[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.asp?filename=trycss_dropdown_button

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

[wingman87]

Probabilmente in wordpress i css del tema sovrascrivono in parte le regole che hai definito o aggiungono delle proprietà che causano il comportamento inatteso.

Dovresti analizzare bene le regole applicate alle voci del menu tramite gli strumenti per sviluppatori del browser (generalmente si aprono con F12 e con CTRL+SHIFT+C abiliti la selezione dell'elemento da ispezionare tramite il mouse).