Son of Suckerfish not properly aligning in IE6

Hello fellow sitepointers!

I am using the “son of suckerfish” drop down menu system. Love it, it’s fast, clean, and small. IE6 is presenting a bit of a dilemma though (what else is new). Basically when you hover over the first LI element, the resulting drop down UL element is roughly 15px to the right of where it should be appearing. So rather than being directly left aligned with it’s parent List element it’s offset.

Quite frustrating i might add. :nono:

The css is as follows:



#nav, #nav ul {
 font-family:Arial, Helvetica, sans-serif;
 font-size:10px;
 text-align:center;
 list-style:none;
 height:30px;
 padding: 0;
 margin:0;
}

#nav li { 
 float:left;
 position:relative;
 padding: 0 10px 0 0;
 width:87px;
 line-height:30px;
 list-style-type:none;
}

/* First level Link Styles*/
#nav li a:link, #nav li a:visited{
 display:block;
 background-image:url(../images/link_solid.gif);
 background-repeat:no-repeat;
 background-position:top center;
 color:#fff;
 text-decoration:none;
}

#nav li a:hover{
 display:block;
 background-image:url(../images/link_active.gif);
 background-repeat:no-repeat;
 background-position:top center;
 color:#F90;
 text-decoration:none;
}

#nav li a.down {
	display: block;
	background: url(../images/link_active.gif) top center no-repeat;
	color: #ffffff;
	text-decoration: none;
}
/* End First Level Link Styles */

#nav li li{
	line-height:15px;
}

#nav li ul ul { /* Controls position of third level element*/
	margin: -33px 0 0 185px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	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 {
	left: auto;
}





#nav li ul { /* second-level lists */
	position: absolute;
	width:175px;
	text-align:left;
	left: -999em;
	padding-top:8px;
}


#nav li ul li a:link, #nav li ul li a:visited{ /* Second level list a:link, a:visited */
	width:175px;
	height:auto;
	display:block;
	background-image:none;
	background-color:#3A333B;
	padding:5px;
	font-size:11px;
	/* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity:0.8;
}

#nav li ul li a:hover{ /* Second level list a:hover */
	background-color:#670001;
	color:#F90;
}

The link to the website is: http://clients.delianet.com/F3E/i_www/e2/index.php

Thanks in advance for all of your help!

-Nick

I have been attempting to solve the same issue and just discovered the solution, combining ideas from a few sources.

First, like Ryan said above, set the left property of your nested ul to 0 instead of auto. Then, make sure the parent li has position set to relative. Note the hierarchy is slightly different in my sample code.

Tried so many things, frustrating to find the solution so simple!

#nav li {
	float: left;
	position: relative;
}
#nav li ul { /* 2nd level list */
	position: absolute;
	left: -999em; /* allow screen reader accessibility */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: 0;
}

The problem is that IE6 is relying on auto coordinates thus it is moving over based on many factors, text-align, etc. Set coordinates for everything. Set this value to 0, not auto (diagnosis at this time. But make sure coordinates are set for every menu :))

#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 {
	left: auto;
}

BTW that suckerfish article is outdated. Use this one as it is highly updated.

That fixed the issue… thanks! :cool:

Ah ok glad to hear that-your welcome :).

Hi all,
I have the same problem, but if I change auto to “0” as directed above, all of the submenu’s display at point “0” all the way to left of the content instead of under the main menu header it should display under.

#nav, #nav ul {
COLOR: #ffffff;
FONT-Family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 12px;
text-decoration: none;
float: left;
width: 755px;
list-style: none;
line-height: 1;
background: transparent;
font-weight: bold;
padding: 0;
border: solid #000099;
border-width: 0px 0;
margin: 0 0 0 0;
z-index:100;
position:relative;
left:0;
}

#nav a {
display: block;
width: 150px;
color: #ffffff;
text-decoration: none;
padding: 0.15em 0.15em;
}

#nav a.daddy {
COLOR: #000099;

}
#nav a.daddy:hover {
COLOR: #000099;
text-decoration: underline;
}

#nav li {
float: left;
padding: 0;
width: 150px;
}

/* Fix IE. Hide from IE Mac \*/

  • html ul#primary-nav li { float: left; height: 1%;}
  • html ul#primary-nav li a { height: 1%; }
    /* End */

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 175px;
font-weight: normal;
border-width: 0.15em;
margin: 0;
background: #EDEDF8;
text-align: left;
}

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

#nav li ul a {
width: 175px;
width: 175px;
}

#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 {
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 {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: transparent;
}

#nav li:hover, #nav li.hover {
position: static;
}

AnNy ideas what else I need to change?
Thanks!

Hi, enxt time don’t steal someones thread :). Post a new thread, and this time incloude the HTML.

A link would be even better though :slight_smile: