Smooth Menu Sub Menu style problem in IE

[dipper85]

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

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

3) Describe problem: I'm having difficulty defining the background colour of the sub-menu links in IE9. They are taking on the top menu style.

The sub menu style is working in all other browsers though.

Here is the code:



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

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

/*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:link{
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-bottom: 1px solid #545454;
border-left: 1px solid #545454;
border-right: 1px solid #545454;
background:#FFF;
background-color:#FFF;
color:#545454;
}

.ddsmoothmenu ul li ul li a {
background-color:#FFF;
background:#FFF;
}

.ddsmoothmenu ul li ul li a:hover{
border-bottom: 1px solid #44ad8c;
border-left: 1px solid #44ad8c;
border-right: 1px solid #44ad8c;
background:#FFF;
color:#44ad8c;
background-color:#FFF;
}


Any help much appreciated.

[ddadmin]

Inside the CSS for the sub menu links, simply try adding a background property:


/* 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;
background:navy;
}

You might want to add a :hover pseudo class to change the rollover color as well:



.ddsmoothmenu ul li ul li a:hover{
background:blue;
}