4 Replies Latest reply: Feb 23, 2013 6:38 AM by Ken Binney RSS

    Can't change hover color in Spry menu bar

    x_defect Community Member

      I'm trying to customize my horiztonal Spry menu bar, and have managed to get it almost as I want, except the hover state. It should be easy enough since I want everything (top Menu items, and Submenu items) to change to the same red background image when hovered over (as well as to have the top menu item remain red when its submenu is open).

      Currently I have everything hovering to the correct color, except for top Menu items that contain Submenus (though their Submenus are fine, as well as top Menu items with no Submenus).

      I thought I had pinpointed where to edit this in the Spry CSS, but something may be conflicting, since changing it doesn't seem to work as it has in other menus I've tested it on..

       

      Here's the draft of the site - http://beta.deltsig.com/

      (Notice the first 4 menu items don't change to red when hovered over)

       

      Here's the section of the CSS where I think it should be - I can post more of it if necessary:

       

       

      /*******************************************************************************

       

       

      DESIGN INFORMATION: describes color scheme, borders, fonts

       

       

      *******************************************************************************/

       

       

      /* Submenu containers have borders on all sides */

      ul.MenuBarHorizontal ul

      {

                border: 1px solid #CCC;

      }

      /* Menu items are a light gray block with padding and no text decoration */

      ul.MenuBarHorizontal a

      {

                display: block;

                cursor: pointer;

                padding: 0.5em 0.75em;

                color: #363837;

                text-decoration: none;

                background-image:url(../css/images/menu-graygradient.gif);

      }

      /* Menu items that have mouse over or focus have a red gradient background text.

      This section changes Hover state for Childless Parents and Children ? */

      ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

      {

                background-image:url(../css/images/menu-redgradient.gif);

                color: #363837;

      }

      /* Menu items that are open with submenus are set to MenuBarItemHover.

      This section changes Hover state for Childless Parents and Children ? */

       

       

      ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

      {

          background-image:url(../css/images/menu-redgradient.gif);

                color: #363837;

      }