HTML and CSS Drop Down Navigation Bar
 

Hi

Could you please help me with my Drop Down Navigation Bar.

http://jsfiddle.net/HE5k6/2/

If you hover over "project" it lists sub items with some more sub items. However, it is not displaying in a block, project 1 and 2 should not be inline. Also i'm trying to make it so that when they hover over Projects the background stays white when they are on the sub items.

Thanks

KHAN

Hello KKHAN,
You style that menu only as deep as ul li ul. When it goes another level deeper, you need to style that as well - ul li ul li ul li

It's kind of hard to follow because your CSS isn't exactly intuitive.
The first level is styled by #headerNav ul li
The second level by #headerNav li ul

Since you don't specifically style
#headerNav ul li ul li
or
#headerNav ul li ul li ul
or
#headerNav ul li ul li ul li
they inherit the styling of the parent ul/li's

Does that make any sense at all?

Yep it does actually make a lot of sense what you said, basically i'm not styling the child nodes.

If i want to display any ul li a, so that the lists are not on the same line but below each other how would i do it?

I'm trying..

display:block;

but it does not seem to be working.

EDIT: i think i figured it out, who knew making your code more neat and structured will help fix problems. Need to get into the habit of doing this.

Sometimes all that's needed on a child li is float: none; to stop it from behaving like an earlier li.