Dropdown Menu Woes

L

liunx

Guest
The problem I'm having is that this (Suckerfish Menu) isn't working properly in IE. What it does is that when you hover over the longer words, it pushes the menu background out so that it is longer than it was before you hovered over it. Hopefully that made sense. Here's the code I am using.

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Welcome to Adobe GoLive 6</title>
<style type="text/css" media="screen"><!--#nav, #nav ul { font-weight: normal; line-height: 1; background-color: #483d8b; list-style-type: none; float: left; margin: 0 0 1em; padding: 0pt; border-style: solid; border-width: 1px 0 1px 0; border-color: #483d8b; width: 100% }

#nav a { color: white; font-size: smaller; font-family: Tahoma, Arial, Verdana, Helvetica, Sans-Serif; text-decoration: none; padding: 0.25em 2em; width: 10em; w\idth: 6em; display: block }



#nav li {
float: left;
padding: 0;
width: 10em;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li li {
padding-right: 1em;
width: 13em
}

#nav li ul a { color: white; font-size: smaller; width: 13em; w\idth: 9em }

#nav li ul ul {
margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { text-decoration: underline; left: -999em }

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { text-decoration: underline; left: auto }

#nav li:hover, #nav li.sfhover { text-decoration: underline }
#nav a:hover { color: #b5b6c8; font-weight: bold; text-decoration: underline }--></style><script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
</head>

<body bgcolor="#ffffff">
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a> </li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Departments</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">City Clerk</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Planning & Building</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Finance</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Municipal Court</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Police</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Parks & Recreation</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Public Works</a></li>
</ul>
</li>

<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">City Council</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Boards & Commissions</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Meeting Minutes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Council Calendar</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Job Opportunities</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Mayor & Council Members</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Poulsbo Municipal Code</a></li>
</ul> </li>

<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Quicklinks</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Engineering</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Utility Billing</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Trash Pickup</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Recycling</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Parks & Recreation Classes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Budget Info</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Taxes</a></li>
</ul></li>

<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">About Poulsbo</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Addresses</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Staff Directory</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Bug Form</a></li>
</ul></li>

</ul>
</body>

</html>The bad news is it doesn't work at all in IE5/Mac. :(WHAT? Grr. OK, didn't know that. Have any alternative suggestions?
 
You must log in or register to reply here.
Back
Top