Ok først bemærk lige at:
.menu ul liDen regel der gælder for alle list elementer der er under classen menu, dvs. både over og under lister bliver ramt af den regel - dvs. underlister bliver sat til inline og float og relative position osv. For at undgå det brug da i stedet:
.menu > ul > li Bemærk i øvrigt også at float: left gør display: inline overflødig. Fjern begge de regler og sæt display: inline-block i stedet som Dan skriver.
Næste problem. Du forsøger at sætte din underliste til position:absolute og giver dem en width på 160px ved hover:
- .menu li:hover ul
- {
- display:inline;
- width:160px;
- }
Det gør selvfølgelig at den liste du forsøger at lave til inline kun har 160px at gøre godt med. Så hvis du sætter dem til float: left eller display: inline-block så rygger de ned på hver sin linje fordi der ikke er plads til dem.
position: absolute fjerner faktisk ul'ens "block" egenskab og pludselig fylder ul'en ikke noget, du vil derfor ikke kunne floate li elementerne eller sætte dem til display: inline-block, de har simpelthen ikke noget at forholde sig til nemlig - UL'en med position absolute skal have en størrelse før det vil virke.