jQuery Multi Level CSS Menu #2 - Slight Problem

[Pooky]

For some reason, the hover for the sub menu's is not working or I have done something wrong.

designbyily.com/api/index.html You can see that the menu is working (links have not been activated) and the tabs have the hover effect working. But when you go to the sub menus, the hover effect does not seem to appear.

Would anyone know what I may be doing wrong?


.jqueryslidemenu{
font: bold 13px Verdana;

padding: 50px;
}

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

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
background: transparent; /*background of tabs (default state)*/


}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;

color: #f7e7b4;
padding: 8px 10px;
border-right: 1px solid #5f8700;
color: #2d2b2b;
text-decoration: none;
}

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

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

.jqueryslidemenu ul li a:hover{
background: #f7c92b; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

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

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

/* Sub level menu links style */
.jqueryslidemenu 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 white;
background: #f7c92b;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}


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

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

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

[Pooky]

Never mind...I figured it out.