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.

Instead of doing "ul[id=drop]" do "ul#drop" :)

user2019515
– user2019515

2013-05-28 22:45:04 +00:00
Commented May 28, 2013 at 22:45 — user2019515
– user2019515, Commented May 28, 2013 at 22:45
oh, ok. that would be the cleaner method. thank you

webdesChris
– webdesChris

2013-05-28 22:49:00 +00:00
Commented May 28, 2013 at 22:49 — webdesChris
– webdesChris, Commented May 28, 2013 at 22:49

Turnip · Accepted Answer · 2013-05-28 22:50:21Z

4

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 ... }

edited May 28, 2013 at 22:50

answered May 28, 2013 at 22:44

Turnip

36.8k15 gold badges92 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

webdesChris Over a year ago

Your answers really helped. Thank you much

Collectives™ on Stack Overflow

Need CSS Dropdown Menu Advice

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related