CSS - Son Of Suckerfish Drop Downs

Hi there,

I have this css to display some drop downs, but the drop downs are not showing in IE, but they are in FF.

any ideas why?
Code:

#navt,
#navt ul {
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
}
#navt a {
  display: block;
  z-index: 1000;
  width: 10em;
}
#navt li {
  float: left;
  z-index: 1000;
  width: 10em;
}
#navt li ul {
  z-index: 1000;
  position: absolute;
  width: 10em;
  left: -999em;
}
#navt li:hover ul {
  z-index: 1000;
  left: auto;
}
#navt li:hover ul,
#navt li.sfhover ul {
  z-index: 1000;
  left: auto;
}

drlinklove.com/drew/index4.html

Some of the navigation items have drop-down menus. It seems that sometimes the drop-down menu disappears before the user has a chance to click one of the options.

Anyone have a guess to how I can make it more stable?

Hi everyone,

So I'm implementing the suckerfish dropdown into one of my sites. I'm having a bit of trouble getting something to work correctly. I did most of the grunt work on getting it customized, but I was hoping someone could help me figure out a few minor details.

The version of the drop down I had to make has images for the top level (main level) of the navigation, and each image is a unique size. In doing so, as well as adding padding to the second level li for aesthetic purposes, in IE the menu doesn't drop but floats over to the right. I'm not sure why this is.

Also, I know this may be more fit for the JavaScript area, and I'll repost there if necessary, but I'd like to keep the top level image in the "over" state while the cursor is on that 2nd level dropdown. Is that possible?

I'll be anxious for your feedback, this has been driving me crazy all day.

Here's the code.

XHTML:
Code:

<div id="nav">
<ul>
<li class="one"><a href="#"><img src="images/home.gif" /></a></li>
<li class="two"><a href="#" onmouseover="document.two.src='images/nav-our_products_on.gif';" onmouseout="document.two.src='images/nav-our_products_off.gif';"><img name="two" src="images/nav-our_products_off.gif" /></a>
<ul>

<li><a href="#">sublink 1</li></a>
<li><a href="#">sublink 2</li></a>
</ul>
</li>
</ul>
</div>

CSS
Code:

#nav {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
}

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

#nav ul li.one {
float: left;
margin: 0;
padding: 0;
width: 51px;
list-style: none;
}

#nav ul li.one img {
border: 0;
}

#nav ul li.two {
float: left;
margin: 0;
padding: 0;
width: 118px;
list-style: none;
position: relative;
}

#nav ul li.two img {
border: 0;
}

/* - begin level 2 - */

#nav ul li ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: -999em;
border: solid 1px #ddd;
width: 118px;
voice-family: "\"}\""; 
voice-family:inherit;
width: 116px;
}

#nav ul li ul li a {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 118px;
voice-family: "\"}\""; 
voice-family:inherit;
width: 113px;

}

#nav ul li.two ul li a:hover {
color: #52432c;
background-color: #e4e2db;
text-decoration: none;
}

#nav ul li:hover ul, #nav ul li.sfhover ul {
left: auto;
}

JavaScript
Code:

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);

It seems that in IE something isn't being cleared, as it almost appears that the second level is in place directly next to the top level link that is activating the dropdown menu.

I look forward to your insight!

Thanks!

-Brian

hey guys,

im not the greatest with css and html but i do it for fun to try and teach myself.

Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down.

The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc)

and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating.

What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big.

Here is my CSS for the drop.

Code:

#nav li ul {
	background: #FCDFFF;
	background-image: url('images/background.png');
	border-style: ridge;
	border-width: 5px;
	border-color: #000000;
        margin-top: 0px;
	position: absolute;
	font-size: 95%;
	width: 11em;
	left: -999em;
	line-height: 2;
	z-index: 999;
}

anybody know how I can do what Im looking for?

Thanks in advance!

So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li.

For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated.

Here's a selection of my code where I think the problem is happening:

Code:

<div id="nav">
   	<ul id="dd">
       	<li id="hm"><a href="menu.html">Menu</a></li>
        <li id="au"><a href="about_us.html">About Us</a></li>
        <li id="oc"><a href="#">Our Coffee</a>
        	<ul>
            	<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
            	<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
            	<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
            </ul>
        </li>
        <li id="os"><a href="os_hy.html">Our Stores</a></li>
        <li id="ols"><a href="online_store.html">Online Store</a></li>
        <li id="oct"><a href="our_culture.html">Our Culture</a></li>
    </ul>
</div>  

Code:

#nav ul li ul li a {
	display: block;
	height: 0px;
	overflow: hidden;
}

#dd li#oc a {
	display: block;
	width: 95px;
}

#dd li#oc {
	float: left;
	width: 95px;
}

#dd li#oc ul {
	position: absolute;
	width: 95px;
	left: -9999px;
}

#dd li#oc:hover ul {
	left: auto;
}


#dd li#oc:hover ul, #dd li.sfhover ul {
	left: auto;
}

li#oc ul li a {
	height: 0px;
	display: block;
	overflow: hidden;
}

#oc_dd_ko a {
	background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ko a:hover {
	background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ma a {
	background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ma a:hover {
	background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ka a {
	background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

#oc_dd_ka a:hover {
	background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

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

Any suggestions would be appreciated.

I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it.

This is an example of the problem.

Any suggestions?

Hi,

Can anyone help me. I am using a son of suckerfish dropdown menu on a joomla 1.5 site I am working on.

laminatefabricators.com

The menu is dropping down fine on all of my browsers (apple mac: safari, camino, firefox). & are fine on firefox for pc. The menus aren't displaying at all on Internet explorer.

Please help... I have wasted so much time trying to fix it/find a fix.

If you are having problems with Son of Suckerfish and IE7, where the drop down menu will not disappear like it should. Take out the javascript because you do not need it with IE7, but if you still want IE6 to work then put it in.

For IE7, you need to add


Code:

*:first-child+html #nav {
height: 1%;
}
*:first-child+html #nav li {
height: 1%;
} 

to your css and you will be fine. Don't ask me why, Don't ask how, i just chalk it up to just IE

I built a custom Suckerfish CSS dropdown nav, with a portion of the code for which is below:

Code:

#nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
text-align: left;
}

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

li.navsep {
float: left;
width: 2px;
}

li.home {
float: left;
position: relative;
width: 61px;
}

li.home img {
border: 0;
}

li.ourproducts {
float: left;
position: relative;
width: 132px;
z-index: 500;
}

li.ourproducts img {
border: 0;
}

li.ourproducts ul {
display: none;
position: absolute;
top: 0;
left: 0;
width: 132px;
background-color: #fff;
}

li.ourproducts ul a, li.ourproducts ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 129px;
}

li.ourproducts ul a:hover {
display: block;
background-color: #e4e2db;
color: #67670f;
text-decoration: none;
}

The focus is on the li.ourproducts a, li.ourproducts a:visited declaration.

In IE6, the background on :hover is 3 pixels shy of covering the whole list item. I know this must have something to do with the padding. FF however, renders it fine.

I figured that IE6 would handle the box model fine. When I make the width 132px however for li.ourproducts a, li.ourproducts a:visited, in IE6 it's fine and in FF it's 3 pixels farther than it should be (135px).

Can anyone hint at what the problem might be? I can't seem to get the declaration so both see it fine.

-B

I have been trying to get Son of Suckerfish dropdown menus to work in IE for me for the longest time... I just can't get it to align how I want it to when I add my own "tab" effect.

Code:

	<ul id="nav">

		<li id="main1" class="mainMenu"><a href="./index.php">Home</a></li>
		
		<li id="main2" class="mainMenu"><a href="./about.php">About Us</a></li>

		<li id="main3" class="mainMenu"><a href="./calendar.php">Calendar</a></li>

		<li id="main4" class="mainMenu"><a href="./college.php">College&nbsp;Students</a>
			<ul>
				<li><a href="./studentNews.php">News</a></li>
				<li><a href="./studentLeaders.php">Student Leaders</a></li>
				<li><a href="./sundaySupper.php">Sunday Supper</a></li>
				<li><a href="./serventEvents.php">Servant Events</a></li>
				<li><a href="./gallery2/main.php?g2_itemId=40">Fall Retreat</a></li>
			</ul>
		</li>
		
		<li id="main5" class="mainMenu"><a href="./family.php">Family&nbsp;Ministry</a>
			<ul>
				<li><a href="./family.php">Overview</a></li>
				<li><a href="./fmSchedule.php">Schedule</a></li>
				<li><a href="./fmActivities.php">Activities</a></li>
				<li><a href="./gallery2/main.php?g2_itemId=53">Photos</a></li>
				<li><a href="./fmYouCanHelp.php">You Can Help</a></li>
				<li><a href="./fmCoordination.php">Education Coordination Team</a></li>
			</ul>
		</li>
		
		<li id="main6" class="mainMenu"><a href="./serving.php">Ways&nbsp;to&nbsp;Serve</a></li>
		
		<li id="main7" class="mainMenu"><a href="./giving.php">Ways&nbsp;to&nbsp;Give</a>
			<ul>
				<li><a href="./giving.php">Financial Home</a></li>
				<li><a href="https://www.eservicepayments.com/cgi-bin/specialwebapp.vps?appid=40a27221f816144b21e9f2e0d81891b8a68820b814b79fc6caf83c6a4fcf06b22f288aa4a34f  a442a76b20a4eb1041b012267f0823e0ef99aeca1bf9c914f523">Make A Gift Online</a></li>
				<li><a href="./eft.php">Electronic Fund Transfer</a></li>
				<li><a href="./matching.php">Matching Gifts</a></li>
				<li><a href="./meijer.php">Meijer Community Rewards</a></li>
				<li><a href="./givingTools.php">Tools for Giving</a></li>
				<li><a href="./endowment.php">Endowment Fund</a></li>
			</ul>
		</li>
		
		<li id="main8" class="mainMenu"><a href="./contact.php">Contact Us</a></li>
		


	</ul>

That's the HTML

Code:

#nav {
	float: left;
	list-style: none;
	line-height: 1;
	font-size: 16px;
	padding: 0;
	margin: 0 0 0.5em 0.6em;
}

#nav ul {
	list-style: none;
	background: #006600;
	padding: 0;
	border: 1px solid #000;
}

#nav li.sfhover ul {
	left: 1em;
}

#nav a {
	display: block;
	color: white;
	text-decoration: none;
	padding: 0.25em;
	padding-right:0;
}

#nav ul a {
	display: block;
	width: 6em;
	color: white;
	text-decoration: none;
	background:none;
	border:none;
}

#nav li {
	float: left;
	padding: 0;
	width: 7em;
	height:auto;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 13.9em;
	font-weight: normal;
	border: 1px solid #000;
}

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

#nav li ul a {
	width: 12em;

}

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

/*  Width of the tabs */
#nav #main1 {
	width:3.4em;
}

#nav #main2 {
	width:4.6em;
}

#nav #main3 {
	width: 4.5em;
}

#nav #main4 {
	width:7.85em;
}

#nav #main5 {
	width:7em;
}

#nav #main6 {
	width:6.8em;
}

#nav #main7 {
	width:6.3em;
}

#nav #main8 {
	width:5.5em;
}

#nav li {
	margin-right: 3px;
	border: 1px solid #000;
	background: #006600;
	color: white;
	text-decoration:none;
}

#nav li ul li {
	border:none;
	background: #006600;
	color: white;
	text-decoration:none;
}

#nav li ul {
	border: 1px solid black;
}

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

And that's the CSS


Just in case this will help, here's a link to a test page (just throw together so There is no content other than the menu)
http://www.martinlutherchapel.org/test.html

Hi all

This is the place I need help with
http://www.simon.rochester.edu/source%20files/newpage/web5/
at the white navigation bar on the top, the dropdown is aligned to the top right corner rather than bottom left. I looked up suckerfish page and found out that's what IE does, so I added the fix:

top:100%;
left:0;

to #topnav li ul

However, nothing happens. I tried a slew of other things, nothing seems to change that bit. Can anyone help?

Also if you notice, the white bar navigations are images, those images get compressed for some damn reason in IE. Mozilla doesn't have any of these problems.

I implemented IE7 patch as well

I am trying to get my suckerfish dropdown menu to be centered on the page regardless of the resolution of the monitor. I know this is possible, but I just can't wrap my head around it. This is what I have so far:
Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	
	<head>
	
		<title><?php echo $title_page; ?></title>
		
		<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
		
		<link rel="stylesheet" type="text/css" href="site_files/style/web.css" />
		
		<link rel="Shortcut Icon" href="site_files/pictures/favicon.ico" />
		
		<script type="text/javascript" src="site_files/ie_drop.js"></script>
		
	</head>
	
	<body>
		
		<div id="header">
			<p>NAVPACMETOCCEN San Diego Operational Home Page</p>
		</div>
		
		<div id="info">
			<p>This page will be down at 1100 GMT on 20 June 2005.  Click <a href="site_files/php/status.html">here</a> for more information.</p>
		</div>
		
		
		<div id="menu">
			<ul id="nav">
		
				<li><a href="index.php">Home Page</a></li>
				
				<li>Support
					<ul>
						<li><a href="site_files/php/a.html">Ship Specific</a></li>
						<li><a href="site_files/php/a.html">Unit Specific</a></li>
						<li><a href="site_files/php/a.html">Detachment</a></li>
						<li><a href="site_files/php/a.html">Mobile Env. Team</a></li>
						<li><a href="site_files/php/a.html">Coast Guard</a></li>
					</ul>
				</li>

				<li>Satellite
					<ul>
						<li><a href="site_files/php/a.html">Infrared</a></li>
						<li><a href="site_files/php/a.html">Visual</a></li>
						<li><a href="site_files/php/a.html">Water Vapor</a></li>
						<li><a href="site_files/php/a.html">Lightning</a></li>
						<li><a href="site_files/php/a.html">Analysis</a></li>
					</ul>
				</li>
				
				<li>Products
					<ul>
						<li><a href="site_files/php/a.html">Warnings</a></li>
						<li><a href="site_files/php/a.html">Forecasts</a></li>
					</ul>
				</li>
				
				<li>Aviation 
					<ul>
						<li><a href="site_files/php/a.html">Products</a></li>
						<li><a href="site_files/php/a.html">Contact Info.</a></li>
						<li><a href="site_files/php/a.html">OBS/TAFS</a></li>
						<li><a href="site_files/php/a.html">Aviation Links</a></li>
					</ul>
				</li>

				<li><a href="site_files/php/links.html">Links</a></li>

			</ul>
		</div>
		
				<div id="leftside">
		
			<p class="leftmenu"><a href="http://www.navy.com">Navy Jobs</a></p>
			
			<p class="leftmenu"><a href="http://www.donhr.navy.mil/NoFearAct.asp">No Fear Act</a></p>
			
			<p class="leftmenu"><a href="http://www.navy.mil">U.S. Navy Website</a></p>
			
			<p class="leftmenu"><a href="html/privacy.html">Privacy Policy</a></p>
			
			<p class="leftmenu"><a href="site_files/disclaimer.html">DoD Disclaimer</a></p>
			
		</div>

	</body>
	
</html>

And here is the style sheet:

Code:

/* This part tells us how the hyperlinks will be handled by the browsers, and also what the background will be */


a:link { /* This is the link standard color*/
	color: #000000; /*black*/
	}
a:visited { /* This is the color of an already visited link*/
	color: #800080;/*purple*/
	}

a:hover {/* This is the color your link will take when you move your mouse over it*/
	color: #FF0000;/*red*/
	text-decoration: none;
	}
	
a:active {/* This is the color and effect when you physically click on the link*/
	color: #008080;  /*teal*/
	}

a { /*This tells the browser not to underline any links */
	text-decoration: none;  
	}


/* This begins the header and the information notice portion */

#header {
	margin: -14px -8px 0px -8px;
	padding: 10px;
	height: auto;
	background: #000060;
	}

#header p {
	margin: 0;
	height: auto;
	color: #FFFF1B;
	text-align: center;
	font: small-caps 24px verdana, san-serif, serif;
	}

#info {
	margin: -1px -8px 0px -8px;
	padding: 1px;
	height: auto;
	}

#info p {
	margin: 0;
	height: auto;
	color: #0000FF;
	background: #FFFFFF;
	text-align: center;
	font: bold 12px arial, san-serif, serif;
	}

/* This ends the header and the information notice portion */





/* This begins the Drop-down menu portion*/

#menu { /* Top-Right-Bottom-Left */
	margin: 0 0 0 145px;
	padding: 0;
	width: auto;
	font: small-caps bold 12px verdana, san-serif, serif;
	}

ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	}

li { /* all list items */
	float: left;
	position: relative;
	width: 125px;
	}

li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 14px;
	left: 0;
	}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
	}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
	}
	
/* This ends the drop-down menu portion */	




/* This begins the left-side menu portion */
	
#leftside {
	margin: 100px 0px 0px -8px;
	width: 115px;
	color: #000000;
	font: small-caps 12px arial, san-serif, serif;
	}
	
.leftmenu {
	margin: 5px 0 2px 0;
	height: 15px;
	background: #DDEEFF;	
	}
	
#pkinotice {
	margin: 0px 50px 0px 125px;
	font: bold 12px arial, san-serif, serif;
	}
	
.pki {
	border: 2px solid #FF0000;

As you can see, I've just moved it over manually 145 px, and that centers it pretty well if you are viewing it at 1024x768, but at higher resolutions, the 145px is not sufficient for the centering.

If anyone has an idea on how to fix it, I'd appreciate help. The solution must be able to validate, and work in both IE and a compliant browser (mozilla or firefox is what I use). Also, if the style sheet code can be cleaned up, or you see mistakes, don't hesitate to tell me. I've been learning CSS2.1 for about 3 months now, but I am not a whiz at it... I appreciate the help.



Many thanks...

Bryan

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

So I tried this popular drop-down menu technique and is all good except that the second-level menu links line up beside the top-level headers in IE6 instead of, well, dropping down (which thankfully does happen in FF). This would be very confusing for visitors trying to navigate!

I have seen this problem described on forums and blogs but not found a solution. The example page at HTML Dog displays properly in IE6, which offers no insights . . .

See the page in question: hire.karenjeane.com/web/site2.php

Thanks for any help!