IE6 & CSS Drop Down Menu problems

**Aimkat** · 10-03-2008, 10:13 PM

I'm not very well-versed in CSS, but I was asked to use it to create a drop down menu. Apparently IE 6 and CSS drop down menus don't go well together, though. I know IE6 has issues with any kind of :hover, besides a:hover (I'm using li:hover) so that's an issue. Not to mention that :last-child is being used as well (I'm using li:last-child, though I don't fully understand it). I’ve searched online for ways to fix these problems in IE6, but I haven’t found anything useful. Does anyone know of a place that explains how to get around these problems? Or if you know yourself, could you explain it in a reply post? Thank you in advance!

**TheJoshMan** · 10-04-2008, 02:16 AM

ah ha! A topic that's right up my alley...

Ok, here is the minimalist script which I am using in all of my CSS menu designs to compensate for IE6's lack of support concering :hover.

Code:

cmdHover = function() {
	var cmdList = document.getElementById("cmd").getElementsByTagName("LI");
	for (var i=0; i<cmdList.length; i++) {
		cmdList[i].onmouseover=function() {
			this.className+=" cmdhover";
		}
		cmdList[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" cmdhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", cmdHover);

The instructions...

Save the above script as "cmdHover.js" (or whatever you want to save it as really)

Add this to the head of your page:

Code:

<script type="text/javascript" src="cmdHover.js"></script>

Then anywhere in your css which has "li:hover" needs to be copied, but the copy should replace "li:hover" with this: "li.cmdhover"

Here's an example of original css:

Code:

#cmd li:hover ul a {
color:black;
}

Now here is how the css should look using the script:

Code:

#cmd li:hover ul a, #cmd li.cmdhover ul a{
color:black;
}

Hope that helps!

**Aimkat** · 10-06-2008, 03:37 PM

Thank you so much for the reply! Unfortunately, it still doesn't want to work.

My code is below. Please let me know if you see anything that's off. Thanks!

Code:

<script type="text/javascript" src="cmdHover.js"></script>
<style type="text/css">

body {text-align:center;}

#header { padding: 5px 0 0; width:900px; height:100px;} 
#header img { border:none; float:left; padding-right:15px;}

/* Horizontal Navigation Styles */
#header ul { margin-top:1.7em;}
#header ul li { float:left; display:block; list-style:none; }
* html #header ul li { padding:0.8em 0;}
#header ul li a { padding:0 10px; margin:0 0;}
#header ul li a:hover { color:#4e4e4f;}
#header ul li ul { margin-top:0; margin-left:-100px; display:none; position: absolute; }
* html #header ul li ul { width:400px; margin-left:-150px;}
#header ul li:hover ul, #header ul li.cmdhover ul { display:block; padding-top:7px; }
#header ul li ul li a { border:none; padding:0.3em 0.3em;}
#header ul li ul li a:hover { color:#4e4e4f;}
#header ul li.active a, #header ul li.active a:hover { color: #4e4e4f;}
/* End of Horizontal Navigation Styles */

a { color:#000000; text-decoration:none;}
a:hover { color:#333;}
body.about #content img { padding:0.2em; border:1px solid #069; margin: 0 1em 0.2em 0;} 



.style1 {font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight:bold;}
	
.style2 {font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;}
	
</style>

</head>

<body class="home">
	<div id="header">
	  <ul>
      <li class="active"><a href="http://www.yahoo.com" class="style1">Home</a></li>

			<li><a href="http://www.yahoo.com" class="style1">Videos</a>
				<ul>
					<li><a href="http://www.yahoo.com" class="style2">Consultation</a></li>
					<li><a href="http://www.yahoo.com" class="style2">Dynamic Web</a></li>
					<li><a href="http://www.yahoo.com" class="style2">E-Commerce</a></li>
					<li><a href="http://www.yahoo.com" class="style2">Hosting</a></li>
				</ul>
			</li>
		  <li><a href="/dev/about.php" class="style1">Channels</a>
            <ul>
					<li><a href="http://www.yahoo.com" class="style2">Consultation</a></li>
					<li><a href="http://www.yahoo.com" class="style2">Dynamic Web</a></li>
					<li><a href="http://www.yahoo.com" class="style2">E-Commerce</a></li>
					<li><a href="http://www.yahoo.com" class="style2">Hosting</a></li>
			</ul>
		  </li>
            <li><a href="http://www.yahoo.com" class="style1">Community</a>
            <ul>
					<li><a href="http://www.yahoo.com" class="style2">Consultation</a></li>
					<li><a href="http://www.yahoo.com" class="style2">Dynamic Web</a></li>
					<li><a href="http://www.yahoo.com" class="style2">E-Commerce</a></li>
					<li><a href="http://www.yahoo.com" class="style2">Hosting</a></li>
			  </ul>
		  </li>
            <li><a href="http://www.yahoo.com" class="style1">Sign In</a>
            <ul>
					<li><a href="http://www.yahoo.com" class="style2">Consultation</a></li>
					<li><a href="http://www.yahoo.com" class="style2">Dynamic Web</a></li>
					<li><a href="http://www.yahoo.com" class="style2">E-Commerce</a></li>
					<li><a href="http://www.yahoo.com" class="style2">Hosting</a></li>
			  </ul>
		  </li>
		</ul>
</div>

**TheJoshMan** · 10-06-2008, 04:25 PM

using "display:none;" for a submenu and then changing to "display:block;" upon hover is not the preferred method.

Try using this.

Code:

#header ul li ul { margin-top:0; margin-left:-100px; position: absolute; left:-999em;}

#header ul li:hover ul, #header ul li.cmdhover ul { position:absolute; left:auto; padding-top:7px; }

**Aimkat** · 10-06-2008, 05:36 PM

Still not working :/

**TheJoshMan** · 10-06-2008, 09:22 PM

Well, the only thing I can offer is to take a look at your page in question. You'll need to post a link to the page or at least a test page which is giving you the same results.