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
Larry, the width of the submenu on a vertical Spry Menu is in two places:
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
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
FOUND THE ANSWER$..After trying to fix this I finaly got it..
The answer was to ADD..width:autoas shown below
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#333333;
color:#ffffff;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
This is the link and you can see it works now:
http://www.knottydog.com/KDProductions.html
Larry
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
North America
Europe, Middle East and Africa
Asia Pacific