Dev Shed Forums

**jschnyderite**

I'm working on my first suckerfish dropdown for a site. I'm encountering two problems.

1) There is no background color on the subitems when i select the main item, making them hard to read

2) Internet Explorer displays the dropdown to the right of the main list item, rather than below. Netscape displays it correctly. Is this due to something I altered?

Code:

<!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>Markey Home Remodeling</title>
<link href="main.css" rel="stylesheet" type="text/css">

<style title="text/css">
#container {
	width: 562px;
	background: #F4ECD9;
	text-align: left;
	
	margin: 0 auto;
}



#nav, #nav ul {
	float: left;
	width: 562px;
	list-style: none;
	line-height: 1;
	background: EAE3A3;
	font-weight: bold;
	padding: 0;

	margin: 0 0 1em 0;
}

#nav a {
	display: inline;
	width: 10em;
	w\idth: 6em;
	color: #7C6240;
	text-decoration: none;
	padding: 0.25em 2em;
}

#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
	float: right;
	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 {
	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 {
	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: white;
}


</style>


<script type="text/javascript">

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>


</head>

<body>

<table width="800" border="0" cellspacing="0" cellpadding="0" class="tableborder" align="center">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  
  <tr>
    <td height="20" width="562" class="leftnav">

<div id="container">

<ul id="nav">    
 
  <li><a href="#">SIDING</a></li>  
 
 <li><a href="#">GUTTERS</a></li> 
 
 
  <li><a href="#">BASEMENTS</a></li>  

<li><a href="#">WINDOWS</a>         
  <ul>
  <li><a href="#">300 Series</a></li>  
  <li><a href="#">900 Series</a></li> 
  <li><a href="#">Sliding</a></li>
  <li><a href="#">Bay and Bow</a></li>
 </ul>     
 </li>     

  
<li><a href="#">DOORS</a>         
  <ul>
  <li><a href="#">Entry</a></li>  
  <li><a href="#">Patio</a></li> 
  <li><a href="#">Garage</a></li> 
  </ul>     
</li>         
  
</ul>

</div></td>
  
    <td class="rightnav">
	
	<div id=linkstyles>   &nbsp;   <a href="#">HOME</a>   &nbsp;   <a href="#">CONTACT US</a>
	</div></td></tr>
  
  <tr>
    <td>
	
	<table width="562" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/mainimage.jpg"></td>
  </tr>
  <tr>
    <td><div align="center"><img src="images/whychoose.jpg"></div></td>
  </tr>
  <tr><td>
  
  <table width="98%" border="0" cellspacing="0" cellpadding="0" align="center" class="maincontenttable">
  <tr>
    <td width="50%">REPUTATION: A proven track record with thousands of 
delighted customers.
<br><br>
QUALITY: The highest quality products, the best trained 
window installers
*all A.W.D.I. (American Window and Door Installed) Certified.
<br><br>
PRICE: The lowest prices on the highest quality 
brand-name products. Period.
<br><br>
Factory Authorized Distribution, Factory Trained 
Employees.
<br><br>
Qualified, Courteous Salespeople treat you with 
professionalism and respect.
</td>
    <td width="355">&nbsp;</td>
  </tr>
</table>

  
  </td></tr>
</table>

	
	</td>
	<td valign="top" width="100%"  class="mainrighttable">
	<table width="230" border="0" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td><img src="images/pledge.jpg" hspace="5" vspace="5"></td>
  </tr>
  <tr>
    <td>
	
	<table border="0" cellspacing="0" cellpadding="0" align="right" class="rightcontenttable">
  <tr>
    <td>Our business has always been family owned 
and operated.  For more than 27 years, we 
have served our community with pride and 
integrity. Years ago, the best craftsmen always 
put their names on their work.
<br><br>
We still do.</td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

	
	<span class="style1"></span></td>
  </tr>
  
</table>

</body>
</html>

Thanks for your help

**Kravvitz**

1)

Code:

background: EAE3A3;

should be

Code:

background: #EAE3A3;

2) IE doesn't handle left:auto and top:auto correctly. I suggest you give position:relative to "#nav li" and change the left:auto to left:0 in the li:hover rule.

Dev Shed Forums

Thread: Suckerfish Dropdown Help

Suckerfish Dropdown Help

Comments on this post