Help with modified All Levels Menu hover state

[silverbob]

I've decided to use images for the top bar in this script. The images are stacked (or sliding images). I've gotten their hover states to work properly, but can't figure out how to maintain their "on" state while hovering over the sub items.

TopBar CSS:

.topbar ul{
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 0;
background: #fff;
overflow: hidden;
width: 100%;
}

.topbar li{
display: inline;
margin: 0;
}

.topbar li {float:left;}
.topbar li a {display:block; float:left; height:50px;}
.topbar li a b {position:absolute; left:-9999px;}

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

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

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

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

.topbar a.selected{
font-size: 16px;
font-family: sans-serif;
font-weight: normal;
color: #000;
background: #fff;
text-decoration: none;
}

Base CSS:

.ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
font-weight: bold;
color: #7c7c7c;
font-family: arial, sans-serif;
font-size: 10px;
white-space: nowrap;
text-decoration: none;
/*font: normal 13px Verdana; */
margin: 0;
padding: 0 8px 0 8px;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px #c9d2e3 solid;
visibility: hidden;
z-index: 100;
}


.ddsubmenustyle li a{
display: block;
width: 150px;
height:22px; line-height:22px;
color: #7c7c7c;
font-weight: bold;
background-color: #fff;
text-decoration: none;
padding: 4px 5px 4px 8px;
border-bottom: 1px solid #c9d2e3;
}

* html .ddsubmenustyle li a{ /*IE6 CSS hack*/
display: inline-block;
}

.ddsubmenustyle li a:hover{
background-color: #fff;
color: #000;
font-weight: bold;
text-decoration: none;
padding: 4px 5px 4px 8px;
border-bottom: 1px solid #c9d2e3;
height:22px; line-height:22px;
}


/* ######### Neutral CSS ######### */

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
visibility:hidden;
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
right: 6px;
border: 0;
}

.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

[ddadmin]

Well, during the selected state, the script adds a CSS class of ".selected" to the primary menu item's A element (not the outer LI element). That's the extent in which you can modify how the selected state appears. Looking at your CSS, since you're using the sliding door's technique of changing both the A and LI background of the menu item onMouseover, the ".selected" class can't reach the LI element unfortunately.

[silverbob]

Thanks. I split them up into separate images and now it works.


.topbar li a#products {width:162px; background:url(/images/topNav/productsOFF.gif);}
.topbar li a#downloads {width:162px; background:url(/images/topNav/downloadsOFF.gif);}
.topbar li a#support {width:163px; background:url(/images/topNav/supportOFF.gif);}
.topbar li a#compliance {width:163px; background:url(/images/topNav/complianceOFF.gif);}
.topbar li a#partners {width:163px; background:url(/images/topNav/partnersOFF.gif);}
.topbar li a#company {width:167px; background:url(/images/topNav/companyOFF.gif);}

.topbar li a#products.selected {width:162px; background:url(/images/topNav/productsON.gif);}
.topbar li a#downloads.selected {width:162px; background:url(/images/topNav/downloadsON.gif);}
.topbar li a#support.selected {width:163px; background:url(/images/topNav/supportON.gif);}
.topbar li a#compliance.selected {width:163px; background:url(/images/topNav/complianceON.gif);}
.topbar li a#partners.selected {width:163px; background:url(/images/topNav/partnersON.gif);}
.topbar li a#company.selected {width:167px; background:url(/images/topNav/companyON.gif);}

[silverbob]

Is there a way to have the top-level item, and the sub item, both continue to be selected after moving to the selected page? Sort of like bread crumbs, but the menu shows where you are at.

I suppose I could create a new style for .ddsubmenustyle li a.selected which mimics the hover state, but then I would have to modify the HTML on each page. It would be better to do this with the script.

[ddadmin]

Hmm there's no easy way to do this right now unfortunately. It's something I may add to the script's features down the road.