Internet Explorer 7 strange behaviour for drop down list

Question

Created a very simple HTML/CSS drop down navigation using nested unordered lists.

Works great with Firefox, Chrome, IE8 but in IE7 the sub navigation doesn't sit below the parent, instead it sits below parent to the right.

For an example and HTML/ CSS have a look here http://webfe.omega.studiocoast.com.au/

I'm stumped!

Answer 1

IE gets confused by position: absolute inside floats with auto layout. Set an explicit left: 0 on .sub_nav and position: relative on the parent (floated) li to avoid this.

(Is float: left; display:inline-block; intentional, to work around some other bug or something? It doesn't make sense by itself.)