Using the DNN Nav.  I have been trying to change the root menu background images (the icn and txt) but it is changing the module menu background on hover.  The module menu down arrow is also picking up the background of the root menu.  Arggh.

I tried copying the module menu styles out of the DNN-Blue module CSS, but that had no impact.

   Here is the relevant CSS code:

-------------------------------

/* Main Menu */
.mainMenu .root   { padding:0px 0px 0px 10px; color: #5b2a02; font: bold 16px Arial; text-align:center; display:block; white-space:nowrap; float:left; position:relative;} /* background:url(images/menu_sep.jpg) left top no-repeat; */

.mainMenu .root.first { background:none;}

.root .txt    { padding-top: 10px; padding-bottom: 10px; padding-left:5px; padding-right:14px; display:block;}

.root.hov .txt   { background:url(MenuOnR.png) 100% 0px no-repeat; }

.root.hov .icn   { background:url(MenuOnL.png) no-repeat; width:10px; height:40px; display:block; float:left; position:absolute; left:0px; top:0px;}

.root.sel .txt   { background:url(MenuOnR.png) 100% 0px no-repeat;}

.root.sel .icn   { background:url(MenuOnL.png) no-repeat; width:10px; height:40px; display:block; float:left; position:absolute; left:0px; top:0px;}

/* Sub Menu Style */
.mainMenu .m .hov .icn{
 height:0px;
 width:0px;
 background:none;
 position:relative;
  }

.mainMenu .m .sel .icn{
 height:0px; width:0px;
 background:none;
 position:relative;
 left:0px;
 top:0px;}

.mainMenu .m .sel .txt{
 background:none;}

.mainMenu table{
 border:1px solid #4E4E4E;
 background:url(submenu.png) repeat #FFF;}

.mainMenu table .txt{ 
 display:block;
 float:none;
 text-align:left;
 font-size:12px;
 font-weight:normal;
 padding:6px 8px 6px 8px;
 color:#292929;
 background:none; }

.mainMenu table .hov {
 background:#6F6F6F; 
 }

.mainMenu table .hov .txt{
 color:#fff;}

.DataGrid_Item{
 font-size:11px;}
.DataGrid_AlternatingItem{
 font-size:11px;}

.DNNEmptyPane{
 display:none;}

.ModuleTitle_Menubar,
.ModuleTitle_MenuItem,
.ModuleTitle_MenuItem .m .hov .icn,
{
 border: white 0px solid; /*override borders*/   
 background: #FFF;
}

.ModuleTitle_MenuItem TD {  /*TD if menu is using tables*/
 cursor: pointer;
 cursor: hand;
 color: black;
 font-family: Tahoma, Arial, Helvetica;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
 height: 21px;
    white-space: nowrap;  /*Word wrapping menu item now optional*/
    padding: 1px 3px 3px 1px;
 background:none;
}

.ModuleTitle_MenuIcon {
 cursor: pointer;
 cursor: hand;
 background-color: #EEEEEE;
 width: 15px;
 height: 100%;   /*override the default height for icon so that menubreaks can have heights adjusted*/
}

.ModuleTitle_SubMenu
{
 z-index: 1000;
 cursor: pointer;
 cursor: hand;
 background-color: #FFFFFF;
 filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3);
 padding: 1px 1px 1px 1px;   /*explicitly set padding for sub-menus */
}

.ModuleTitle_MenuBreak  {
 background-color: #EEEEEE;
 font-size: 1px; /*make sure you take out portal.css ModuleTitle_MenuBreak for this to work*/
}

.ModuleTitle_MenuItemSel {

 cursor: pointer;
 cursor: hand;
 color: black;
 font-family: Tahoma, Arial, Helvetica;
 font-size: 9pt;
 font-weight: bold;
 font-style: normal;
 background-color: #C1D2EE;
}

So if I understand correctly... To target the submenu items I would add the CSS prefix: i.e. mainMenu .root .txt. So how do I target the root level only besides using only .root .txt?