CSS – Qualcuno può aiutarmi a capire dove ho sbagliato con il mio menu a discesa nav?

Volevo imparare come creare una barra di navigazione a discesa nel modo più semplice e pulito ansible. Ho seguito questo wiki come guida al menu a discesa solo CSS, ma sembra che il mio codice non sia compatibile con le aggiunte suggerite.

Qualcuno potrebbe dirmi dove si verificano i conflitti all’interno del codice o se esiste un modo più semplice per implementare un menu a discesa (familiarità con jQuery / JavaScript se è più semplice)?

HTML:

     

YourUniverse

CSS:

 /*-------------------header----------------------*/ body{ margin:0px; } #headerDiv{ position: fixed; height:12%; width:100%; background-image:url("deepspace.png"); background-repeat:repeat-x; text-align: center; } #titleDiv{ width: auto; margin: auto 0; } #titleText{ color:white; font-size:130%; text-allign:center; font-family:verdana,san serif; } span:first-child{ color:blue; } span{ color:purple; } .navDiv{ display:inline-block; } .navUL{ position:relative; display:inline-block; list-style-type:none; margin: auto 0; padding:0; border-top:1 solid; border-right:1 solid; border-left:1 solid; width:100%; } .navUL:after{ content:""; display:table; } .navUL li{ padding: .2em 2em; margin:2em,2em,2em,2em; color: #fff; background-color: #036; display:inline-block; text-align:center; } .dropdown{ position:absolute; display:none; background-color:white; } .navUL ul li:hover > ul{ display:inline; } .navUL>ul>li:after{ content:"\25BC"; font-size:.5em; display:inline; position:relative; } .searchDiv{ display:inline-block; } /*------------------body--------------------*/ .bodyDiv{ text-align:center; float:left; background-color:grey; height:80%; width:70%; position:relative; top:80%; left:50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } 

Il li al livello 1 dovrebbe avere la position:relative proprietà position:relative , in modo che il bambino possa essere in grado di impostare la posizione in base al suo genitore. Apporto alcune modifiche, vedi il violino: clicca qui