2013-05-28 5 views
5

Ich versuche, meine erste reine css/html Dropdown-Menü, aber ich hatte eine harte Zeit bekommen die Hover-Funktion ordnungsgemäß funktionieren. Ich habe großartige Antworten erhalten, aber dieses Mal ist alles durcheinander und es ist nicht an der richtigen Stelle. Ich bin an diesem Punkt so verloren.Brauchen Sie CSS Dropdown-Menü Beratung

http://jsfiddle.net/X5Dbc/

position: absolute; or somthing like that... 

ich habe eine Ahnung, es somthing mit positioning die jsfiddle oben zu tun hat, ist das, was ich habe, nachdem über die „Dropdown-Effekt“ zu fragen ..

Denken Sie daran, ich bin immer noch ein Neuling, wenn es um richtiges CSS geht. Irgendwelche Ratschläge oder Hilfe, die dieses Menü arbeiten lassen, würden sehr geschätzt! Und konstruktive Kritik ist immer willkommen.

+0

Statt "ul [id = drop]" tun "ul # drop" :) – user2019515

+0

oh, ok. das wäre die sauberere Methode. danke – webdesChris

Antwort

4

Ihr Markup ist nicht gültig. ID s muss eindeutig sein. dh Sie können nicht dieselben ID auf mehreren Elementen verwenden. Das ist, was class ist für. Es ist nicht notwendig, dafür ID s zu verwenden.

#navwrap ul li ul { 
    display: none; 
} 
#navwrap ul li:hover ul { 
    display: block; 
    position: relative; 
} 

Bewegen Sie den :hover an die Mutter li

Sie können die beiden ul seperat wie dieser Art:

Top Level:

#navwrap > ul { your styles ... } 

Sublevel:

#navwrap ul ul { your styles ... } 
+1

Ihre Antworten haben wirklich geholfen. Vielen Dank – webdesChris

+0

Keine Sorge. Froh, dass ich Helfen kann – Turnip