Log in

View Full Version : 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.



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:
<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:


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


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


#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!


<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.



#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.
Aimkat
10-10-2008, 10:13 PM
I ended up using a different drop down menu that will actually work this time so no more problems. Thank you for the help!