Vertical MenuBar - Widget Positioning

Question

I created a webpage that contains 3 columns.  The middle column is mostly pictures and text, and I have floating Vertical MenuBars on each side of the page.  The Left Vertical MenuBar has a Widget opening immediately to the Rright, and I'm trying to get the Widget on the Right Vertical MenuBar to open immediately to the Left.  So basically I need the Widgets to open inward.
Here's my problem, the Widget on the Right Vertical MenuBar appears in the Upper-Left corner of the webpage.  This is what I did so far to get to this point.  I copied the SpryMenuBarVertical.css, and create a new file called SpryMenuBarRightVertical.css.  The reason I did this is to make sure that the Widgets don't open on the same side both both Vertical MenuBars.  I then changed all the rule names from MenuBarVertical to MenuBarRightVertical.  I also changed the appropriate code in the webpage to reflect these modifications.
So when I hover over the menu, the widget shows up in the Upper-Left corner.  I did play around with the rules (trial and error) to see if I could move the positioning but the closest I got was when I changed...
ul.MenuBarRightVertical ul.menuBarSubmenuVisible
from  -  left: 0px
to     -  left: 500px
it moved the widget to the Top-Middle of the page.
The other rules that I think should affect the widget it...
ul.MenuBarVertical ul
cursor: default;
font-size: 100%;
left: -1000em;
list-style-type: none;
margin: -5% 0 0 -100%;
padding: 0;
position: absolute;
top: 2px;
width: 279px;
z-index: 1020;
So now my question is how do I change the positioning of this widget?
Here is some information that might help ( I actually think this is the cause, but I don't know what to do)
From the Dreamweaver CS4 Manual
Position: Absolute: Places the content using the coordinates entered in the Placement boxes relative to the nearest absolutely- or relatively-positioned ancestor, or, if no absolutely- or relatively-positioned ancestor exists, to the Upper-Left corner of the page.
So I believe that the Widget is not recognizing its ancestor of parent.
Thank you for your time and patience on this matter.
Mamilossa

Answer 1

Hi
the fact that you say -
to     -  left: 500px
it moved the widget to the Top-Middle of the page.
Proves that it does recognize its parent, (in this case the body tag).
I have not used spry for some time but -
You will probably find that you will have to change some of the css/javascript rules and names for the sub-menu items, check for ones that position the sub-menu.
If you have cs3 or 4, then create your menus on new separate pages, and check for the differences in the css/javascript, as these will be the rules you must insert into your 'new' combined css/javascript files.
PZ