The reason for the horizontal dropdown menus is the highlighted line in
The value for the width needs to be an absolute values like 142px or similar.
If you want to force the wrapping of the text, you could use <br /> as in
<li><a href="#" class="MenuBarItemSubmenu">coaching<br />overview</a>
Also have a look here http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l and consider complaining to Adobe or finding an alternative.
I need some help with the Spry menu too; I've been trying to manufacture rounded corners for a Vertical Spry Menu that that I've modified heavily, I've changed the background a whole lot more...I've doen everything that I wanted to do with the menu except achieving the rounded corners and spacing the wording on the nav menu (ie. home, about us etc.). I've managed to get away with the rounded corners feature by imoprting a PNG that gives off that impression as I couldn't find a solution via CSS3, the only problem with this is that the submenus don't have these rounded corners...how to I instill my png file into my submenus? Lastly how do I customize the space of words from each other?
I've tried the "ul.MenuBarVertical a" and inserting the line height value of 30px in attempts of centering text but that doesn't help. I furthermore tried toggling the "box" option in CSS properties but this didn't help neither. I just want to center the text (vertically) well within the text's assigned box.