Skip navigation
62jayne
Currently Being Moderated

HOW TO CHANGE  spry 1.7 menu width

Jun 30, 2012 4:44 PM

Tags: #dreamweaver #menu

need help on how to change the width of the sub menu on a vertical spry menu

text runs off the container

 

see this link to see the problem  It the Sub menu that over run..

 

www.knottydog.com/KDproductions.html

 

Any help greatly appreciated

Larry

lhemmerich@knottydog.com

 
Replies
  • Currently Being Moderated
    Jun 30, 2012 4:59 PM   in reply to 62jayne

    Larry, the width of the submenu on a vertical Spry Menu is in two places:

    1. The width of the unordered list that is the submenu container:
      ul.MenuBarVertical ul
      {
      ...
      width: 8.2em;
      ...
      }
    2. and the width of the undered list items that make up the submenu:

              ul.MenuBarVertical ul li

              {

                        width: 8.2em;

              }

    Because of the way the submenu styling is set up, the items' text should run to one or more lines without escaping the borders. You will want to change the width in both places, to match your new submenu width.


    I would have gladly checked out your site, but the link does not work...

     

    Beth

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2012 5:23 PM   in reply to 62jayne

    In fact, your submenus are fine; your sub-submenus need attention.

     

    Presently, they are styled exactly as the submenus. To differentiate sub-submenus from submenus, add another style selector AFTER the other submenu styling, as here:

     

    This selector may stay:

     

    ul.MenuBarVertical ul li

    {

              width: 8.2em;

    }

     

    Follow it immediately with this one, adjusted to the width YOU want to use:

     

    ul.MenuBarVertical ul ul,

    ul.MenuBarVertical ul ul li {

              width: 12em;

    }

     

    Do not put it BEFORE the other submenu styling, or the other styling will cancel it out. Note that this is a group selector, with both the ul ul and the ul ul li in the same definition.

     

    Thanks for the functioning link; it was indeed helpful.

     

    Beth

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 5:42 PM   in reply to 62jayne

    Nice simple fix, Larry, Congrats!

     

    Note that you are adding width: auto; and overriding the width: em; which you no longer need, although I frequently leave an old measure in place, in case I need to go back. Probably good idea to "comment" it out with /* width: 7em; */

     

    I also note that you are in a more recent version of menu than that for which I gave you specific fixes.

     

    Make sure your solution works in all browsers before you do handsprings, but it is possible that you have it!

     

    Beth

     
    |
    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