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 (http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm) 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. :o