CSS Drop-menu not working in IE 7

Here is the sample site:

http://tronitech.brettatkin.com/solutions.asp

In IE 7, the drop-downs aren't working correctly (really not at all). The do show on hover but that is about it.

This is my first attempt at working through creating CSS only drop-menus, so I'm wel开发者_如何学JAVAcome to all feedback and criticism about the code in general.

Thanks

Brett

A fix is very easy:

On line 266 of styles.css:

#nav ul li {
    float: left;
    position: relative;
}

change: #nav ul li to #nav > ul > li. Problem fixed.

That is, replace the descendant combinators (a space: ) with direct child combinators (>). This prevents the lis inside the submenus from having the problematic float: left, while still allowing the starting lis to keep float: left.

You have set float: left; in this css #nav ul li which is affecting sub lists as well.

You need to add float:none; in the css #nav ul li:hover ul li

or

do the change: #nav ul li to #nav > ul > li as thirtydot mentioned in his answer.

Solving issues like this generally requires that the CSS and accompanying code - if JS is used to add a class, for example - be posted along with your question. I'd guess that there's an issue with sizing (margin, padding, or height change) in the menu, to begin with. Looks like when hovering over the first sub-menu item, the remaining <li> items get bumped. The float looks obvious, and since the second item jumps right, that would be my guess. I'm not seeing any class changes, so does your CSS rely strictly on hover?