Dropdown menu in IE6 inserting too much width, not dropping-down

Question

I have a CSS dropdown menu which is working great in IE7, FF, Safari, and Opera (on PC, haven't been able to test on Mac yet).

Unfortunately in IE6 - which my clients on this project are all using, urgh - the menu stretches too wide and covers the site logo. Also, none of the dropdowns work.

To some extent I could live with the dropdowns not working in IE6, but I can't have the menu covering the logo.

http://preview.sgwl.net/

The site uses a modified version of http://wordpress.org/extend/plugins/wordpress-css-drop-down-menu/. I had to modify it to make the top level items not fixed-width, which is probably what's screwing up IE6. I've tried using _width:1px; _overflow:hidden; and an array of other IE6 hacks but nothing has worked.

It took a bit of doing to get the menu working in the browsers where it's working now, so answers that rely on IE6-specific styles rather than recoding from the top down would be fantaaastic! THANK YOU!!

Answer 1

On line 276 in custom.css you have

/* a hack so that IE5.5 faulty box model is corrected */
* html .custom .menu a, * html .custom .menu a:visited {
    width:149px; 
    w\idth:138px;
}

• html will also affect IE6. If you remove that whole section of code, the menu will format correctly in IE6.