No replies
edacsac
Offline
Regular
Last seen: 14 years 30 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

I came up with a CSS dropdown menu based on the suckerfish idea. My difference is I needed to right justify everything and have the 3rd level flyouts fly left. I managed to do ok.

The only problem I'm having, is when I try to space out the dropdropdown lists vertically, they don't work in IE. You can hover over the main link and it will show the dropdown, but as soon as you reach for teh dropped down menu, it disappears. If I leave the spacing alone - all mashed together, it works fine. I would like to have the option to size the li's, as I'd like to add eye candy to the menu.

I've tried padding, margin, height declarations, but they all produce the same non-working result in IE. I've also compared line for line against the suckerfish example I started with, but I can't figure it out.

Many thanks for any help! Below is my test page. It's just a skeleton, and I know the flyout is misaligned. I'm just trying to make it work in IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Menu test</title>
 
<script>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
 
<style>
#nav, #nav ul {
padding: 0;
margin: 0;
 
list-style: none;
float:left;
font-size:9px;
font-family: verdana, tahoma, arial;
font-weight:300;
line-height:1;
color: #CC0000;
}
#nav a {
display: block;
width: 90px;
height:25px;
text-align:right;
/*padding-top:2px;
padding-bottom:2px;
padding-right:2px;*/
margin-right:0px;
border:1px solid #000;
}
#nav li ul a {
display: block;
width: 140px;
text-align:right;
/*padding-top:2px;
padding-bottom:2px;
padding-right:2px;*/
margin-right:0px;
border:0px solid #c00;
right:0;
}
#nav li {
float: left;
width: 100px;
}
#nav li ul {
position: absolute;
width: 140px;
left: -999em;
border:1px solid #cc0;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li ul ul {
margin: -20px 0 0 -102px;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height:1;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left:auto;
width:150px;
margin: 0 0 0 -52px;
}
 
A.red {
color: #990000;
font-weight:bold;
text-decoration: none;
cursor:help;
font-size:10px;
font-family: verdana, tahoma, arial;
font-weight:700;
line-height: 12px;
padding-left:5px;
padding-right:5px;
}
A.red:active {
color: #990000;
font-weight:bold;
text-decoration: none;
cursor:help;
font-size:10px;
color: #000;
font-family: verdana, tahoma, arial;
font-weight:700;
line-height: 12px;
padding-left:5px;
padding-right:5px;
}
A.red:visited {
color: #990000;
font-weight:bold;
text-decoration: none;
cursor:help;
font-size:10px;
font-family: verdana, tahoma, arial;
font-weight:700;
line-height: 12px;
padding-left:5px;
padding-right:5px;
}
A.red:hover {
color: #949483;
font-weight:bold;
text-decoration: none;
cursor:help;
font-size:10px;
font-family: verdana, tahoma, arial;
font-weight:700;
line-height: 12px;
padding-left:5px;
padding-right:5px;
text-decoration:underline;
}
</style>
 
<!--[if IE 6]>
<style>
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left:auto;
width:150px;
margin: 0px 0 0 -102px;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left:auto;
width:150px;
margin: -2px 0 0 -102px;
}
</style>
<![endif]-->
</head>
 
<center>
<div style="position:absolute;left:120px;">
<ul id="nav">
<li><a class="red" href="#">Home</a></li>
<li><a class="red" href="#">Contact</a>
<ul>
<li><a class="red" href="#">contact1</a></li>
<li><a class="red" href="#">contact2</a></li>
</ul>
</li>
 
<li><a class="red" href="#">Services</a>
<ul>
<li><a class="red" href="#">service1</a>
<ul>
<li><a class="red" href="#">sub1</a></li>
<li><a class="red" href="#">sub2</a></li>
</ul>
</li>
<li><a class="red" href="#">service2</a></li>
<li><a class="red" href="#">service3</a></li>
<li><a class="red" href="#">service4</a></li>
<li><a class="red" href="#">service5</a>
<li><a class="red" href="#">service6</a>
<li><a class="red" href="#">service7</a>
<li><a class="red" href="#">service8</a>
<li><a class="red" href="#">service9</a>
</li>
</ul>
</li>
</ul>
</div>
</center>
 
</body>
</html>