Have you tried positioning and z-index?

Sorry for the offtopic, but does z-index work for IE6?

In IE, select boxes will always appear on top of DIV's, regardless of z-index settings. However, an IFRAME will hide the select box (see http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx).

With some DOM scripting, it's possible to create and position an iframe underneath your dropdown for you to fix the problem. Here's a script I wrote to take care of it:

function toggleSelectBox(ID,show) {
// ID = the id of the dropdown element DIV (or UL)
// show = boolean value to show or hide the dropdown
if(!document.getElementById("boxHide")) {
// create the iframe if it doesn't already exist
var boxHideIframe = document.createElement("iframe");
boxHideIframe.setAttribute("id","boxHide");
boxHideIframe.setAttribute("src","about:blank");
boxHideIframe.setAttribute("scrolling","no");
boxHideIframe.setAttribute("frameBorder","0");
boxHideIframe.style.display = "none";
boxHideIframe.style.position = "absolute";
boxHideIframe.style.top = "0";
boxHideIframe.style.left = "0";
boxHideIframe.style.zIndex = "1";
document.body.appendChild(boxHideIframe);
}

var iframe = document.getElementById("boxHide");

if(document.getElementById(ID)) {
var subnavmenu = document.getElementById(ID);
// show or hide
iframe.style.display = (!show) ? "block" : "none";

if(!show) {
// set values of iframe to be same as subnav element (these are IE specific)
iframe.style.top = subnavmenu.currentStyle['top'];
iframe.style.left = subnavmenu.currentStyle['left'];
iframe.style.width = subnavmenu.offsetWidth;
iframe.style.height = subnavmenu.offsetHeight;
}
}

}

Basically just add that to your onmouseover and onmouseout JS functions that you use for your dropdown menu. Enjoy.

aconnor could you share your solution?

I am having the same problem.

Here's an easy way to do it:

In your HTML, put an iframe in your list. So it'll look something like this:

<ul>
<li>one</li>
<li>two
<ul>
<li>sub list</li>
<li>sub list</li>
</ul>
<!--[if lte IE 6]><iframe class='globalNavIframe' src='about:blank' frameborder='0' scrolling='no'></iframe>
<![endif]-->
</li>
</ul>


And for your CSS:

/* IE 6 and earlier fix - dropdown goes behind select boxes */
.globalNavIframe{display:none;}
ul li iframe{display:block;visibility:visible;position:absolute;left:-2000px;top:-2000px;}

/* of course you'll have to put in the correct code for IE6 hover since it doesn't recognize li:hover
You can add the IE6 hack so it will be something like: li a:hover iframe
*/
ul li:hover iframe{display:block;visibility:visible;z-index:-1;position:absolute;margin-top:30px;border:0px;}

/* the height and width will have to be fixed - there may be a way around this now, but I haven't checked */
ul li:hover iframe{top:5px;left:0px;width:150px;height:170px;}

If you want a copy of a working menu, let me know and I can send it to you.