CSS List-Items Not Displaying Below Each Other

Question

I have spent the last 3 days creating a menu structure which is generated from a database. It works perfectly with the exception of my styling of my List-items. I have coloured the background of the problem area in Red, and these areas show when you hover over the words

Bus Stops
Employees
Fences
Vehicles

The list-items within these red boxes are displaying alongside each other rather than vertically below each other. I cannot for the life of me work out why?

I have created a fiddle to illustrate my problem: http://jsfiddle.net/devin85/tMYxT/4/

I have also set the background color to Red in the Javascript section to help show where the hover event is occurring, and save any good Samaritan the time of searching the code.

Please someone help! Thanks in advance.

Answer 1

Its because of your CSS.

When you declare

#navigation li, .headerRight li { margin: 4px 7px 4px 2px; padding: 0px; float: left; background-color: Transparent; }

you're telling the browser to float left all of the li's under navigation until you tell it otherwise.

#navigation .submenu .submenu li {
   float:none;
}

will tell it not to float on all the list items when their in a second level submenu.

Answer 2

If you add this line to the end of your css file it'll stop those ones floating left:

#navigation .submenu li .submenu li {
    float:none;
}