edit styles on 2nd level csshover.htc menu

[LouPhi]

I would like the 'background' colour to be different on 2nd and all other levels of my csshover.htc menu - I want the top level 'default' menu to have a white background, but I would like the pop-outs to have a coloured background when they appear (ie, not just on mouseover)

Here is the css I'm using to style the menu:



#lhmenu {
width: 12em;
}
#lhmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#lhmenu a, #lhmenu h2 {
display: block;
margin: 0;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 20px;
}
#lhmenu h2 {
font-size: 12px;
font-weight: normal;
color: #333333;
}
#lhmenu a {
text-decoration: none;
background-color: #FFFFFF;
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 4px;
padding-left: 4px;
}
#lhmenu a:hover {
color: #FFFFFF!important ;
background-color: #666666;
}
#lhmenu ul ul ul {
position: absolute;
top: 0;
left: 0;
}
#lhmenu li {
position: relative;
background-color: #FFFFFF;
width: 12em;
}
#lhmenu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#lhmenu ul ul ul
{display: none;}
div#lhmenu ul ul li:hover ul
{
display: block;
background-color: #FF0000;
}
div#lhmenu ul ul ul,
div#lhmenu ul ul li:hover ul ul
{display: none;}
div#lhmenu ul ul li:hover ul
{display: block;}
div#lhmenu ul ul ul,
div#lhmenu ul ul li:hover ul ul
{display: none;}
div#lhmenu ul ul li:hover ul,
div#lhmenu ul ul ul li:hover ul
{display: block;}