Spry submenu overlap - MenuBarVertical

Does anybody know why and/or how to fix it... On my Spry MenuBarVertical when
viewed in the browser the submenu overlaps about half of the main menu. It's
not a problem with the shorter titles from my main menu and I know it'll still
work, but the submenu overlaps about half of the main menu and I'd like it if
the submenu would display to the right of the main menu and not overlap it at
all. Like I said I know it'll still work but for some of my main menu titles
that are a bit longer having the submenu overlap half of the title doesn't look
very professional. There aren't any <div> tags in it. I'd appreciate any
ideas or suggestions.
Thank you.

Any ideas? I thought I had this problem fixed and/or found the solution but
with all of my changes to the Spry vertical submenu now when I view it in the
browser the menu items are stacking up basically one on top of the other and/or
right next to each other instead of aligned vertically with each item being
below the other. I've deleted them and started over enough times now but I
still end up with the same end result. Building the spry vertical submenu is
easy enough, I guess what I'm looking for help and/or suggestions on is all the
ul.menubarvertical choices ul, li, ul li and so on and the CSS Rule Definition
that should go along with each as far as the; block, box, list, positioning and
so on and what rules I should be using. Like I said I found something on the
ADOBE site that I was positive was my answer and very well could've been maybe
I missed something, but none the less what I changed and applied to each
category didn't seem to work how I had hoped it would. Any ideas or
suggestions are apprecaited.
Thank you.