I am working on a gradient menu on my skin and am having some problems with the root menu items.

For example, I have Home and Services at the root level.  Under Services, I have Web Design and IT Consulting.

I have this CSS
.menu_dnnmenu_rootitem {
   cursor:pointer;
   cursor:hand;
   color: #FFFFFF;
   height:28px;
}

.menu_dnnmenu_rootitem_hover {
   background:url(menu_bg_sel.jpg);
   height:28px;
}


In the skin.xml I have specified CSSNodeHoverRoot and CSSNodeRoot and pointed them to the above classes to control the root styles.  The menu bar is a solid gradient controlled by a different bit of CSS.  When I hover over Home, the CSSNodeHoverRoot style is observed.  The gradient changes from a dark blue gradient to a light blue gradient.  When I hover over Services...  Nothing happens.  If I delete Web Design and IT Consulting, then the Root style works.

To complicate matters if I put the menu back to my original state (ie with submenu items) and specify this bit of css instead:
.menu_dnnmenu_rootitem_hover {
   background:red url(menu_bg_sel.jpg);
   height:28px;
}

When I hover over "Home", the Home text lights up with the correct image background.  When I hover over "Services" I get a solid red background.

What am I doing wrong???

Am I missing something???

Please help.

Thanks