modifying the colour of the spry sub menu bar (i.e. drop down content) in dreamweaver

Question

whenever i try and edit the css code, the entire menu is coloured. how can i fix this? i would like the submenu and menu bar to have different colours. thanks in advance:

  /*Menu Bar styling classes*/
ul.MenuBarHorizontal{
 margin: 0;
 padding: 0;
 list-style-type: none;
 font-size: 100%;
 cursor: default;
 width: auto;
}
ul.MenuBarActive{
 z-index: 1000;
}
ul.MenuBarHorizontal li{
 margin: 0;
 padding: 0;
 list-style-type: none;
 font-size: 100%;
 position: relative;
 text-align: left;
 cursor: pointer;
 width: 8em;
 float: left;
}
ul.MenuBarHorizontal ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
 font-size: 100%;
 z-index: 1020;
 cursor: default;
 width: 8.2em;
 position: absolute;
 left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
 left: auto;
}
ul.MenuBarHorizontal ul li{
 width: 8.2em;
}
ul.MenuBarHorizontal ul ul{
 position: absolute;
 margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
 left: auto;
 top: 0;
}
ul.MenuBarHorizontal ul{
 border: 1px solid #CCC;
}
ul.MenuBarHorizontal a{
 display: block;
 cursor: pointer;
 background-color: #EEE;
 padding: 0.5em 0.75em;
 color: #333;
 text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
 background-color: #33C;
 color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
 background-color: #33C;
 color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu{
 background-image: url(SpryMenuBarDown.gif);
 background-repeat: no-repeat;
 background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{
 background-image: url(SpryMenuBarRight.gif);
 background-repeat: no-repeat;
 background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{
 background-image: url(SpryMenuBarDownHover.gif);
 background-repeat: no-repeat;
 background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{
 background-image: url(SpryMenuBarRightHover.gif);
 background-repeat: no-repeat;
 background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe{
 position: absolute;
 z-index: 1010;
}
@media screen, projection{
 ul.MenuBarHorizontal li.MenuBarItemIE{
  display: inline;
  f\loat: left;
  background: #FFF;
 }
}

Answer 1

Well, you haven't provided your markup or a link, so I'll take a stab in the dark... The only background color specified is on the menu bar, right?

ul.MenuBarHorizontal a{
 background-color: #EEE;
}

I don't see any other background-color rules except on hover or focus. Don't you need to add something to your MenuBarItemSubmenu rule(s) to add background color? Of course, again, it's hard to imagine exactly what this is supposed to look like on your page...

EDIT: I just noticed this rule at the end:

 ul.MenuBarHorizontal li.MenuBarItemIE{
  display: inline;
  f\loat: left;
  background: #FFF;
 }

Note the typo in the float rule -- that could be causing the subsequent background rule to not be applied, if that's the issue you're describing (not sure).