...

View Full Version : CSS dropdown menu, not working in IE6



mswanndeford
05-22-2007, 11:48 PM
I have a really basic css dropdown menu that works great in IE7 and FireFox. However, it doesn't work in IE6. The sub bullets aren't showing up at all. :confused:

HTML Code:
<ul id="acctmenu">
<li style="list-style:none"><b>MY ACCOUNT</b>
<ul><li><a href="https://www.greenmountain.com/my_account/index.jsp" target="_blank">Residential</a> </li>
<li><a href="http://b2b.greenmountainbilling.com/Login.aspx?ReturnUrl=%2fDefault.aspx" target="_blank">Commercial</a>
</li></ul></li>
</ul>

CSS:

#acctmenu ul {
margin: 0;
padding: 0;
list-style: none;
}


#acctmenu ul li {
position: relative;
list-style:none
}

#acctmenu li ul {

top: 20px;
left:827px;
display: none;
text-align:left;
padding-top:2px;

}

#acctmenu ul li a {
display: block;
text-decoration: underline;
}

#acctmenu li:hover ul, li.over ul { display: block}

Thanks so much for any help!!!

harbingerOTV
05-23-2007, 01:17 AM
IE6 doesnt do hover on non link elements.

try these:

http://www.xs4all.nl/~peterned/csshover.html

http://www.htmldog.com/articles/suckerfish/

first one makes hover on everythign you want but requires HTC file and some servers might not allow it.

mswanndeford
05-23-2007, 10:50 PM
Thanks for the info. So, does it mean then I should be able to use an empty link and then the hover would work?

I tried the Suckerfish code and didn't have any luck :(

_Aerospace_Eng_
05-23-2007, 11:17 PM
Thanks for the info. So, does it mean then I should be able to use an empty link and then the hover would work?

I tried the Suckerfish code and didn't have any luck :(

Then show us what you did so we can help. Can't help you if you don't show us what you did. Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#acctmenu, #acctmenu ul {
margin: 0;
padding: 0;
list-style: none;
}


#acctmenu li {
float: left;
position: relative;
width: 10em;
}

#acctmenu li ul {
top:1em;
left:27px;
display: none;
position:absolute;
text-align:left;
padding-top:2px;
}

li > ul {
top: auto;
left: auto;
}

#acctmenu li a {
display: block;
text-decoration: underline;
}

#acctmenu li:hover ul, #acctmenu li.over ul { display: block}
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("acctmenu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<ul id="acctmenu">
<li style="list-style:none"><b>MY ACCOUNT</b>
<ul>
<li><a href="https://www.greenmountain.com/my_account/index.jsp" target="_blank">Residential</a> </li>
<li><a href="http://b2b.greenmountainbilling.com/Login.aspx?ReturnUrl=%2fDefault.aspx" target="_blank">Commercial</a> </li>
</ul>
</li>
</ul>
</body>
</html>

mswanndeford
05-23-2007, 11:38 PM
Aerospace_Eng, your kung fu is powerful.

Thanks so much, you are truly the supreme one!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum