Skip navigation
Currently Being Moderated

Can't change hover color in Spry menu bar

Feb 13, 2013 9:28 PM

Tags: #background #color #image #spry #css #menu #hover #customize

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;

}

 
Replies
  • Currently Being Moderated
    Feb 22, 2013 11:59 PM   in reply to x_defect

    Hi,

     

    ---------del: my answer is not needed ---------

     

    Good luck!

    hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 7:16 AM   in reply to x_defect

    Try removing this CSS rule at line 124

     

     

    ul.MenuBarHorizontal a.MenuBarItemSubmenu {

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

    }

     

    DSD.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2013 6:38 AM   in reply to x_defect

    I'm happy, but you should check your pages in Firefox

    dsd.jpg

    I'd try changing the padding in the rule at line 100 from 0.75 to 0.50

     

    ul.MenuBarHorizontal a {

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

        color: #363837;

        cursor: pointer;

        display: block;

        padding: 0.5em 0.75em;

        text-decoration: none;

     

    }

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points