CSS Menu Help

I'm used to JS menu's and now I'm using CSS...

[asptony]

I'm used to JS menu's and now I'm using a CSS menu for my site and I am running into a problem that I wish I could solve on my own.

Everytime you hover over an object, the second-tier items are all listed left-to-right instead of top-to-bottom, they are listing horizontally instead of vertically.

Here is the CSS Code:

--------------------------------

ul { padding: 0; margin: 0; list-style: none; position: absolute; }

li { float: left; position: relative; padding: 5px; background-color: #336699; border-style: solid; border-width: 1px;
display: block; border-color: #ffffff; }

li ul {display: none; position: absolute; top: 23px; left: 0; right: auto; padding: 5px; width: 220px; }

li > ul { top: auto; left: auto; display: none; }

ul li a { display: block; padding: 0; background-color: #336699; display: block; }

ul li a:link {color: #FFFFFF; font-family: Verdana; text-decoration: none; font-weight: bold; font-size: 11.5px; }
ul li a:visited {color: #FFFFFF; font-family: Verdana; text-decoration: none; font-weight: bold; font-size: 11.5px; }
ul li a:hover {color: #FF9900; font-family: Verdana; text-decoration: none; font-weight: bold; font-size: 11.5px; }
ul li a:active {color: #FF9900; font-family: Verdana; text-decoration: none; font-weight: bold; font-size: 11.5px; }

li:hover ul, li.over ul { display: block; }

--------------------------------

Anybody notice any flaws? Anybody have any ideas?

[Robin_reala]

Does adding this in fix it?

li li { float: none; }

You've got your li's to float left (horizontal top menu) but haven't told your sub-li's to stop floating.