Skip navigation
MoniLifecom
Currently Being Moderated

Customizing Spry Menu - Drop items different from tabs at the top

Feb 9, 2013 2:09 PM

How can I remove the background image from the dropped down items on a Horizontal Spry Menu while keeping the image for the tabs at the top? It seems every time I change something for the top tabs, the change is carried to the drop down menus as well.

 

Here is a link:

 

http://www.monicagraphicdesign.com/Bill/spiritual.html

 

You can see what is happening if you hover over "About Bill"

 
Replies
  • Currently Being Moderated
    Feb 9, 2013 2:18 PM   in reply to MoniLifecom

    Open your SpryMenu.css file.  Scroll down a ways to this:

     

    /* 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;

        background-color: #000;

        background-image: none;

    }

    /* Menu item containers are same fixed width as parent */

    ul.MenuBarHorizontal ul li

    {

        background:none;

        width: 8.2em;

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 9, 2013 2:29 PM   in reply to MoniLifecom

    Add a font-size property to that same selector.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 10, 2013 10:20 AM   in reply to MoniLifecom

    You need a separate rule for that.  Add this to line 126 of your Spry CSS code.

     

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

      background:#000; /**change color as req'd**/

    }

     

     

    Nancy O.

     
    |
    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