2 level horizontal drop down menu help

[focus310]

Hello:

I inherited a site which was designed by an SEO firm. They have a 2 level horizontal drop down menu which isn't working in Internet Explorer 6.

The website URL is http://www.chrisspencerhomes.com.
When you hover over the links Communities, Home Plans, Available Homes and Gallery; the drop down menus do not appear in IE6. The website works great in Firefox and IE7.

I attached the CSS file to this post. Can someone help me fix the CSS code so it will work on IE6?

Thank you for all your time and help.

[koyama]

In IE6 the :hover pseudo class is only supported on anchor elements (a) with an href attribute. Therefore styles set for li:hover won't work in IE6.

You can fix it by using JavaScript. Check out the technique used here: http://alistapart.com/articles/horizdropdowns

[_Aerospace_Eng_]

Look like they tried using the method here but didn't do it correctly. http://cssplay.co.uk/menus/flyout2.html
Personally I have a problem with this method mainly because its serving up invalid html to IE. You could easily make a drop down menu with sprinkle of javascript that works in all browsers though you should probably have alternative links in noscript tags for browsers that disable javascript and can't understand :hover on anything but links.

[focus310]

Hi,

I checked out the site you gave me, http://cssplay.co.uk/menus/flyout2.html, and I would love to use it.

Is it possible to get that menu from being vertical to horizontal?

[koyama]

Look like they tried using the method here but didn't do it correctly. http://cssplay.co.uk/menus/flyout2.html
Personally I have a problem with this method mainly because its serving up invalid html to IE.
I'm not so worried about the invalid code because it is only served to IE6 and below. I can live with hacking dead browsers.

What I am much more worried about is that Stu for some reason is using code like this:

<a href="#nogo">Item 3<!--[if IE 7]><!--></a><!--<![endif]-->

The problem is that the code is not forward compatible. The menu is almost with certainty guaranteed to not work in IE8 because IE8 will most likely still support conditional comments which means that it will ignore the entire block: <!--[if IE 7]><!--></a><!--<![endif]-->

He should instead have used this:

<a href="#nogo">Item 3<!--[if gte IE 7]><!--></a><!--<![endif]-->

Is it possible to get that menu from being vertical to horizontal?
http://www.cssplay.co.uk/menus/final_drop.html

...from the same author

[focus310]

Thank you for the link. I'll give it a try.