Need CSS Dropdown Menu Advice

Question

I am trying to make my first pure css/html dropdown menu but I was having a hard time getting the Hover function to work properly. I received great answers but this time, its all messed up and its not in the right spot. I am so lost at this point.

http://jsfiddle.net/X5Dbc/

    position: absolute; or somthing like that...

i have a hunch it has somthing to do with positioning the jsfiddle above is what i have after asking about the "Dropdown" effect..

Keep in mind I am still a novice when it comes to proper CSS. Any Advice or help making this menu work would be most appreciated! And constructive criticism is always welcome.

Answer 1

Your markup is not valid. IDs must be unique. ie you can't use the same ID on muiltiple elements. That's what class is for. There is no need to use IDs for this anyway.

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

Move the :hover to the parent li

You can style the two ul seperately like this:

Top level:

#navwrap > ul { your styles ... }

Sublevel:

#navwrap ul ul { your styles ... }