Skip navigation
Currently Being Moderated

Spry menu: showing boxes for submenu items when not hovered

Jan 22, 2013 11:48 AM


I am struggling with two issues for a Spry horizontal menu.

The menu is the yellow, odd looking section.  I have two submenu items under "About Us" and three under "What we do".


My questions:

1) Why are there boxes under the menu items with submenus when I am not hovered over them?

2) Why is my menu's height seeming to correlate with three submenu items height?


Thanks in advance for any help you may offer... one of those silly things that is drvining me bananas!

Take care,



In case you want to look at my meager coding...

To get to the page:

Spry files:

Basic CSS:



screen shot.png

  • Currently Being Moderated
    Jan 22, 2013 6:00 PM   in reply to agatherum

    1. Change the to highlighted value

    ul.MenuBarHorizontal ul {

        margin: 0;

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        z-index: 1020;

        cursor: default;

        width: auto;

        position: absolute;

        left: -1000em;




    2. As per point one.


    3. In non IE browsers your menu items are back to front because of the highlighted value

    ul.MenuBarHorizontal li{

        margin: 0;

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        position: relative;

        text-align: right;

        cursor: pointer;

        width: 8em;

        float: right;


    This should be left.

    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