How to change hover state on spry menu dropdowns?

Question

I've spent 4 hours making changes to the style sheet. I cannot figure out how to make the drop-down menu background change when you mouseover. The text color changes, but the background doesn't. I keep making changes to the stylesheet, and sometimes I see no difference.
Also... trying to change the font color on the main menu text. Style sheet LOOKS right, but doesn't display any change.
ALSO, my border is wider than the submenus. They are both set to 15ems. Maybe I don't understand ems??? I appreciate all your help out there! Sorry for not taking out all comments from code...
http://duenorthdesign.com/pcm/index2.html
ul.MenuBarHorizontal {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      cursor: default;      width: 748px; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive {      z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ 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; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      z-index: 1020;      cursor: default;      width: 15em;      position: absolute;      left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {      left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 15em;      font-size: 12px;      background-color: #C2CA9A;      color: rgba(0,0,0,1); } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {      left: auto;      top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul {      border: 1px solid #61270e; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      background: 61270e;      padding: 0.5em 0.75em;      color: ffffff;      text-decoration: none; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      color: #61270e; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {      background: transparent;      color: #61270e; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu {      background-image: url(../images/bkd_navtop.jpg);      background-repeat: repeat-x;      color: rgba(255,255,255,1);      font-family: "Yanone Kaffeesatz", Verdana, Geneva, sans-serif;      width: 149px;      font-size: 23px; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {      background-image: url(SpryMenuBarRight.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {      background-image: url(SpryMenuBarDownHover.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {      background-image: url(SpryMenuBarRightHover.gif);      background-repeat: no-repeat;      background-position: 95% 50%; }

Answer 1

The good news is, Spry components generate their own CSs files so you know where to start when customizing. From there you can either go into the CSS file itself, or use the CSS styles panel in Dreamweaver.
if you're looking within the CSS file, you first need to find the block the styles the particular element you want to change, and tweak the values. However, if any of the attributes are inheriting their states from a parent rule, then you need to add that attribute to override the parent setting. So that means making sure you're using the right attribute and getting the syntax right.
If you use the CSS panel, select all, find you way to the correct style sheet, expand it and find the rule you need to change. You can set these parameters in the area underneath, or just double click the rule in the upper tree and display the CSS rules dialog. This is my favorite as it displays exactly what is contained in the style sheet in visual form. You can change values easily and add new attributes knowing that it will write the correct syntax. This should make it very easy to add hover states for the background and text, dimensions for the submenus and borders. For sizes and borders, I prefer pixels, but you can also add borders per side of the containing box - it doesn't have to be the same border all the way around.