Unterkategorien bei horizontalem Menü ausrichten

Hallo,

ich habe mir eine horizontales Menü gebastelt, ähnlich wie diesem:
http://www.gipspferd.de/css/anleitung/…e%20navigation/

Allerdings unterscheidet sich mein Menü in zwei wichtigen Punkten davon, was ich noch ändern möchte:
- die zweite "ul" also die Unterkategorie soll sich am Elternelement ausrichten. Momentan kommt die Liste ganz links (durch das CSS "position:absolute")
- die Breite der unteren Liste muss festgelegt werden, wie hier mit "width: 20rem". Das sollte auch eher einheitlich festgelegt werden, nach dem größten Element...! Der Befehl "display: block" funktioniert nicht.

Vielleicht kann mir jemand sagen, was ich in meinem Code anders schreiben muss, damit diese zwei Punkte im Untermenü funktionieren?

Danke

Zitat

#nav-cat {
margin: 1.714285714rem 0;
background-color: #808000;
}

#nav-cat ul li {
display: inline;
}

#nav-cat ul li a {
line-height: 2.5rem;
font-size: 1.1rem;
color: white;
padding: 0.55rem 0.4285714285rem;
text-decoration: none;
}
#nav-cat a:hover {
background-color: #8b4513;
}

#nav-cat ul li:hover ul , .children li:hover {
background-color: grey;
visibility: visible;
color:black; /* ohne Auswirkungen */
}

#nav-cat ul li ul {
display:block; /* ohne Auswirkungen */
float: left;
line-height: 1.5em; /* ohne Auswirkungen */
width: 20rem;
position: absolute; /* nicht unter dem li des Elternelements */
visibility: hidden;
}

Alles anzeigen