Horizontal menu with images doesn't align

[silverbob]

I'm pretty new to CSS, but was able to modify the SuckerTree menu with some background images. I think I have most of the work done, but can't get these menus to align properly. The menu uses top-level roll-over images and background images for the drop-down items. I hope someone can help me resolve the problem. Here's what I have so far: http://www.symark.com/test2.html

The CSS:

.topNav {width:980px;}
.topNav, .topNav ul {padding:0; margin:0; list-style:none;}

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

/*Top level list items*/
.topNav ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.topNav ul li a{
display: block;
float:left; 
height:50px;
}

.topNav li a b {position:absolute; left:-9999px;}

.topNav li a#products {width:162px; background:url(/images/topNav/products.gif);}
.topNav li a#downloads {width:162px; background:url(/images/topNav/downloads.gif);}
.topNav li a#support {width:163px; background:url(/images/topNav/support.gif);}
.topNav li a#compliance {width:163px; background:url(/images/topNav/compliance.gif);}
.topNav li a#partners {width:163px; background:url(/images/topNav/partners.gif);}
.topNav li a#company {width:167px; background:url(/images/topNav/company.gif);}

.topNav li.current {position:relative; z-index:10;}

.topNav li.current a#products,
.topNav li.current a#downloads,
.topNav li.current a#support,
.topNav li.current a#compliance,
.topNav li.current a#partners,
.topNav li.current a#company
{background-position:left bottom; position:relative; z-index:10;}

.topNav li a#products:hover,
.topNav li a#downloads:hover,
.topNav li a#support:hover,
.topNav li a#compliance:hover,
.topNav li a#partners:hover,
.topNav li a#company:hover
{background-position:left bottom; visibility:visible; position:relative; z-index:20;}

.topNav li:hover {position:relative; z-index:20;}

.topNav li:hover > a#products,
.topNav li:hover > a#downloads,
.topNav li:hover > a#support,
.topNav li:hover > a#compliance,
.topNav li:hover > a#partners,
.topNav li:hover > a#company
{background-position: left bottom;}

.topNav :hover ul
{top:50px; left:0; width:160px; height:auto; background:#fff; border:1px solid #c9d2e3; padding-bottom:20px;}

.topNav :hover ul ul
{position:absolute; left:-9999px; width:0; height:0;}

.topNav :hover ul li a,
.topNav li.current ul li a
{height:22px; line-height:22px; font-family:arial, sans-serif; font-size:10px; white-space:nowrap; font-weight:bold; color:#7c7c7c; text-decoration:none; text-indent:50px;}

.topNav :hover ul#subProducts li a {background:url(/images/topNav/pro.gif) no-repeat 7px 0; width:160px;} 

.topNav li.current ul#subProducts li.subcurrent a, 
.topNav :hover ul#subProducts li a:hover {background:url(/images/topNav/proArrow.gif) no-repeat 7px 0;} 

.topNav :hover ul#subDownloads li a {background:url(/images/topNav/do.gif) no-repeat 0 0; width:160px;}

.topNav li.current ul#subDownloads li.subcurrent a,
.topNav :hover ul#subDownloads li a:hover {background:url(/images/topNav/doArrow.gif) no-repeat 0 0;} 

.topNav :hover ul#subSupport {width:220px;}
.topNav :hover ul#subSupport li a {background:url(/images/topNav/sup.gif) no-repeat 0 0; width:220px;}
.topNav :hover ul#subSupport li a#flyTraining {background:url(/images/topNav/supBlue.gif) no-repeat 0 0;}

.topNav :hover ul#subSupport li a:hover,
.topNav :hover ul#subSupport li a#flyTraining:hover {background:url(/images/topNav/supArrow.gif) no-repeat 0 0; position:relative;}

.topNav li.current ul#subSupport li.subcurrent {background:url(/images/topNav/supArrow.gif) no-repeat 0 0; position:relative;}
.topNav :hover ul#subSupport li a#flyTraining:hover {cursor:default;}

.topNav li.current ul#subSupport li.subcurrent ul li.flycurrent a {background:url(/images/topNav/supArrow.gif) no-repeat 0 0; position:relative;}

.topNav li:hover ul#subSupport li:hover > a#flyTraining {background:url(/images/topNav/supArrow.gif) no-repeat 0 0; position:relative;} 
.topNav :hover ul#subSupport :hover ul {left:220px; top:0; width:220px; height:auto;}

.topNav :hover ul#subCompliance li a {background:url(/images/topNav/compl.gif) no-repeat 0 0; width:160px;} 
.topNav li.current ul#subCompliance li.subcurrent a,
.topNav :hover ul#subCompliance li a:hover {background:url(/images/topNav/complArrow.gif) no-repeat 0 0;} 

.topNav :hover ul#subPartners {width:185px;}
.topNav :hover ul#subPartners li a {background:url(/images/topNav/par.gif) no-repeat 0 0; width:185px;} 
.topNav li.current ul#subPartners li.subcurrent a,
.topNav :hover ul#subPartners li a:hover {background:url(/images/topNav/parArrow.gif) no-repeat 0 0;} 

.topNav :hover ul#subCompany {width:165px;}
.topNav :hover ul#subCompany li a {text-indent:55px; background:url(/images/topNav/co.gif) no-repeat 0 0; width:165px;}
.topNav li.current ul#subCompany li.subcurrent a,
.topNav :hover ul#subCompany li a:hover {background:url(/images/topNav/coArrow.gif) no-repeat 0 0;} 


* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .topNav ul li { float: left; height: 1%; }
* html .topNav ul li a { height: 1%; }
/* End */

[ddadmin]

The Suckertree menu does require some good understanding of CSS inheritance in order to customize successfully. You may want to try All Levels Menu instead, specifically, the vertical side bar option. Since the drop down menus are positioned via JavaScript, CSS plays a much lesser role in the behavior of the menu.

[silverbob]

Thanks. I took a look and the first thing that bothered me is the <li rel=>. I'm pretty sure that "rel" is not a valid attribute for <li>.

[ddadmin]

The "rel" issue will be fixed the next time the script is updated.

[silverbob]

Great. Do you think that will be soon. I saw in a 2004 post where you said you would take care of this.

Anyway, I went ahead and implemented this script and I have only a top level menu. The dropdowns are not working. Everything was copied "as is" with only modifications to the arrow images in the .js file.

Also, how do I specify that the .js file is in my /scripts/ folder? Currently, its in the web root where my test page is.

The test page is at www.symark.com/test5.html

[silverbob]

I figured out why my dropdowns weren't working. I was missing something at the top of the page:

<script type="text/javascript" src="/scripts/ddlevelsmenu.js"></script>

I, albiet wrongly, thought the only declaration was this:

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

Maybe you should add the instruction for the <head> section to your instructions for dummies like me

Anyway, this is working out great! Very easy to customize. I'm not even going to bother with adding additional images.
Now, about that <li rel=> thing......

[ddadmin]

Great. Do you think that will be soon. I saw in a 2004 post where you said you would take care of this.

Well, the script was just created a few days ago, so it's unlikely I mentioned in a 2004 post that I was going to take care of the "rel" issue.

[silverbob]

My mistake. It was in a reply to smitsmah recently about relocating the "rel" to the <a> tag. I was looking at smitsmah's join date instead of the post date. My apologies.