Vertical MenuBar - Widget Direction

Question

I'm new at webdesigning (started only a couple of months ago), so my terminology might not be the best.
I created a webpage that contains 3 columns.  The middle column is mostly pictures and text, and I have Vertical MenuBars on each side.  One Vertical MenuBar floats Left with a Widget MenuBar that appears to the right.
Here's my problem...  The Vertical MenuBar that floats on the Right also has a Widget MenuBar, but it also appears to the Right, which makes it dissappear off the screen.  I want to know if it is possible to make this Widget MenuBar appear on the Right side instead.
So basically, I want the outside Vertical MenuBars to have its Widgets MenuBars to appear towards the middle of the webpage.
If this is possible, how to I go about doing this to my existing webpage?
Thank you for your time.

Answer 1

On a very quick test by changing the position the flyout can move to the opposite side
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: -5% 0 0 -100%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
I changed the original position of 95% to a minus percentage and that move the flyout over.  However, you are still left with the problem of the little arrow indicator, but I'll leave that up to you to work out - I don't have the time to do this now... but look at the positioning of the background image  - you may need to create a new arrow that points in the opposite direction and link to that instead.  This is the rule you may need to look at:
ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);   /* you will need to change this image so it points to the opposite side */
    background-repeat: no-repeat;
    background-position: 95% 50%;    /* try changing this position */
PS:  If you don't want to change the position of the arrow, just swap it for an arrow image that points the other way - that would be the easiest way to do this I believe.
Nadia
Adobe Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap