Smooth Navigational Menu (v1.02) Custom background color for sub menu

[lanta99]

1) Script Title: Smooth Navigational Menu (v1.02)

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem:

Hi,

I have an gradient image for the background on the top level menu, but for some reason that same image appears when I hover over the menu to display the sub menu. My question is if I can set a custom background for the submenu (ie. gray, or silver...)

Here is the current modified css code


.ddsmoothmenu{
font: bold 12px Verdana;
background:url(images/menu.gif) 0 0 repeat-x #FFFFFF;
width: 100%;

}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

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

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background:url(images/menu.gif) 0 0 repeat-x #FFFFFF;
color: white;
padding: 8px 10px;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu ul li a:hover{
background: silver; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}


/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}

Thanks!

[ddadmin]

Since the menu's HTML is one big list, due to CSS inheritance, the background image you've applied to the main menu items are applied to the sub menu links as well. Try overriding that in your sub menu items' CSS:


/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
background: gray;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

[lanta99]

Thanks so much! Your revision worked. :)