Menu Bar CSS has selectors with same name?

Question

Hi,
Just wondering if anyone can tell me why there are two selectors named "ul.MenuBarVertical" and two selectors named "ul.MenuBarVertical ul" in the CSS for the spry vertical menu bar?
Also, changing the background color of "ul.MenuBarVertical a:hover" and "ul.MenuBarVertical a:focus" does not change the background color when viewed in the browser (comes up as a default blue).  What am I missing?
Thanks

Answer 1

It is always best to read the comments within the CSS.
For instance, the first lot of style rules come under the heading
LAYOUT INFORMATION: describes box model, positioning, z-order
Then there are style rules that come under the heading of
DESIGN INFORMATION: describes color scheme, borders, fonts
Other headings are
SUBMENU INDICATION: styles if there is a submenu under a given menu item
and
BROWSER HACKS: the hacks below should not be changed unless you are an expert
As for highlighting there are the following
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #33C;
    color: #FFF;
/* 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-color: #33C;
    color: #FFF;
Gramps