Width of vertical menu bar

I am using Spry 1.6.1 which came with my copy of Dreamweaver CS4 on my Mac.
I am trying to use the vertical tab menus, but am having a bit of a challenge (you can see what I am working on here: <http://www.billiantlysimple.com/Menus.html>).
My first 'challenge' is with changing the width.  I have followed the instructions in the help, on Dreamweacer CS4 Customize the Menu Bar widget here:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html
However, the main menu width seems to be controlled by width: 8em; in ul.MenuBarVertical in SpryMenuBarVertical.css.  Changing this value to 'auto' simply make the menu the page width, so I am assuming the only way to control the width is to manually change it.  Following the suggestions in the help, I set width: to auto and this works well on the sub menus.
The second 'challenge' is on Safari 5.03 on my Mac the background-color looks how I would like to top appear.  However, in Internet Explorer 8.0 the background-color to the right of the text is not shown.  The help suggests using 'transparent' as the color, but even changing this does not help matters.
I can workaround the first issue, but the second is more of a problem.
Assuming that I had made a error when making the changes suggested in the help I deleted everything I had done and started again.  Again I had the problem, so I started for a third time and still the problem remained.

I believe that I have worked out the background-colr issue in Internet Explorer.
There would appear to be CSS element named ul.MenuBarVertical li.MenuBarItemIE and if I add a background-color to this then it gets sorted out.

Similar Messages

  • Problem with IE Vertical Menu Bar Widths

    I currently have a Vertical Menu Bar with the width set to
    auto. IE shows all of the top-level menu items as a single
    word-wrapped line.
    When you hover over any submenu item, the border that appears
    on hover only spans the width of that submenu item's text rather
    than the width of the actual submenu.
    Is there a way to use auto widths in IE or will I just have
    to use predetermined widths?
    My URL is
    http://www.plpimports.com/
    Thanks!!

    I changed the layout so that the menu is fixed width. I think
    I like it better this way anyway.

  • Spry Vertical Menu Bar Styling Issues

    Hello all,
    I'm having CSS issues with a spry vertical menu bar. The Menu
    is fairly basic but, it has some odd sizing requirements specified
    by it's designer. The designer would like the sub menu items to all
    have different widths that correspond to the actual content within
    them. Here is sample.
    http://staging.rm306.com/cycle/
    The menu seen at the page above was not build with Spry. It
    was build with another tool and has considerable problems with
    consistent browser display.
    Can anyone give me a short list of styles and where they
    should be applied that might help me achieve this reletively simple
    effect?
    I've tried to use Spy menu bars in my projects in the past
    but, there was always some sticking point. I'd like this time to be
    the winner if possible.
    Thanks for your time and patience in advance,
    Kevin

    The sample page I posted came after searching for an easy
    "how to do it". The closest I found to a tutorial was this:
    http://www.adobe.com/devnet/dreamweaver/articles/spryte_menu.html
    The author designs and implements a spry menu with Fire Works
    graphics. The last section describes how to modify the existing CSS
    for multiple levels. Yet I found the sample page easier to follow.
    I hope this helps though.

  • How do i customize the states in a vertical menu bar?

    i see that it is possible to change the states for a horizontal venu bar, but i can't get it to work for the vertical one.  please tell me we can edit the states in a vertical menu bar.
    valerie

    Yes, you've hit a bug in Muse, that will be fixed in the next release.
    The bug happens when you have a gradient fill for the default state, but no gradient fill for your other state. The vertical menu has this look by default. You can work around it by removing the gradient in the default state, or adding a gradient for the other states.

  • Question on spry vertical menu bar backgrounds

    I have a spry vertical menu bar.  The menu branches off to 3 or 4 levels in some cases.  When you mouse over the menu structure the menu path that you have selected turns a different color.  I acheived this by giving
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    a different text color and also a different background color using CSS.  The thing I want to acheive now is to somehow make listings within my menu structure that are clickable links a slightly different color.  This is to signal that a menu selection that is currently being hovered over is indeed clickable (and linked to another page).  For example, most of my clickable menu listings are at the end of a menu branches.  That is to say the menu listing at the 1st and 2nd level are not clickable (linked to another page) but the listing that falls at the end of the menu branch is clickable.
    How can I make the menu listings that link to other pages a different color then the other menu listings that do not link anywhere but are instead just the preceding struture to get you to the end of the menu structure?
    Currently menu listings which merely branches off and do not link to a clickable page have a reference of "#" as shown below.
    <li><a href="#">Menu_1</a>
    This "#" was put there by Dreamweaver so I just followed the pattern.  Clickable menu listings reference another HTML page as you would expect.

    Nancy,
    Thanks for the reply (it helped me know how to approach it).  It looks like editing
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
    will give me the behavior I was looking for.  I don't know if that is what I want to do now that I look at it though.  Using different colored backgrounds when hovering over links seems to contrast too much (even though some are clickable and others are not).  Perhaps I didn't have the right color choice.
    Instead I thought about emphasizing links that are clickable (with some type of visual variation) as opposed to making the hovering background color path to those clickable links different.  I experimented with placing a 1 inch border around links in the menu that can be clicked but I am not sure if I like it or not.
    I am using a background color of #7D120C for the hover.  Any suggestions are welcome and appreciated.
    http://www.indiana.edu/~iutreas/index.html
    Thanks,
    JTB

  • Force vertical menu bar to stay open on loaded pages

    I am creating a new site using Dreamweaver CS3, temporarily uploaded at:
    http://www.sharpeacademy.co.uk/nick-jackson.co.uk/sharpeacademy/theatrearts/
    I have a navigation bar with the usual main tabs and sub tabs. Is it possible to configure this so that each section of the nav menu stays open when any of the pages linked to the sub-menus are selected?
    Hope that makes sense!

    OK just managed to resolve the ftp issue. Bit tricky as our
    old (average) website is still on the same server.
    Anyway please check this link.
    http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
    As you can see it works fine in FF but not in IE7. The child
    sub menus keep appearing at the top of the vertical menu
    bar.

  • Artifacts between Logo and Vertical Menu Bar

    See http://www.ottawapatentagency.com
    Artifact #1: a light grey dot at the joint between the logo and the vertical menu bar, on the right hand side.
    Artifact #2: on mouse over 'Home' - the top menu item of the vertical menu bar - there appears a light-colored, 1-pixel separation between the logo and the vertical menu bar.
    The logo is a standard gif and the vertical menu bar is a standard spry menu bar, I am puzzled.
    Anyone has a solution?

    You could try adding the following code above your closing </head> tag:
    <!--[if IE]>
    <style>
    UL.MenuBarVertical:after
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        font-size: 0;
    UL.MenuBarVertical
        display: inline-block;
    UL.MenuBarVertical{
        display: block;
        -height: 1px;
    </style>
    <![EndIf]-->
    Also, it looks like you need to add closing brackets to the following two lines:
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"
    <link rel="icon" href="/favicon.ico" type="image/x-icon"

  • Vertical Menu Bar Component

    Hi,
    I would need to deploy some kind of component as a menu bar but on vertical position. I have found a very interesting component on FlexLib library (see http://flexlib.googlecode.com/svn/trunk/examples/VerticalMenuBar/VerticalMenu_Sample.swf) developed by Doug Mc Cune (see at http://dougmccune.com/blog/2007/01/25/vertical-menubar-component/). Unfortunately the code does not run properly on Flex 3, and in spite of tracing the source code I'm not able to find but is wrong (I have attached it there if someone wants to take a glance of it).
    Has someone been able to fix this issue or developing some kind of component that may be re-used?
    Thanks

    OK just managed to resolve the ftp issue. Bit tricky as our
    old (average) website is still on the same server.
    Anyway please check this link.
    http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
    As you can see it works fine in FF but not in IE7. The child
    sub menus keep appearing at the top of the vertical menu
    bar.

  • Vertical Menu Bar difficulties

    Hi, I'm using the spry menu bar to create a vertical menu bar
    on our new website. I'm new to all this but I've been playing with
    pc's for years and have got the promise of a payrise if I can get a
    neat looking website up and running.
    Anyway, my sub menu bars appear at the top of the section
    when I preview my template and move the mouse over the menu bar.
    I've put a few screen print pics on photobucket so you can see what
    I'm talking about.
    http://i199.photobucket.com/albums/aa13/ewanvx/Klannweb1.jpg
    http://i199.photobucket.com/albums/aa13/ewanvx/Klannweb2.jpg
    What I'd like is to have each sub menu "linked" to its parent
    item in the main menu so it appears alongside the parent item
    rather than at the top.
    How can I make it do this? Or this something to do with the
    IE7 glitch I keep reading about?
    Also can I just check that when I publish the website, the
    flash buttons at the top of the page will actually work as I've got
    them all set as links to other pages, but in preview mode these
    links don't seem to work.
    Its annoying me this as I was unable to get a book on
    dreamweaver cs3, so bought a book on dreamweaver 8 which of course
    doesn't use the spry system. Everything else seems very similar
    though. As I want the same basic layout at the sides and top I'm
    using a template which is the page I'm editing in the above pics.
    Please help!
    E.

    OK just managed to resolve the ftp issue. Bit tricky as our
    old (average) website is still on the same server.
    Anyway please check this link.
    http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
    As you can see it works fine in FF but not in IE7. The child
    sub menus keep appearing at the top of the vertical menu
    bar.

  • Spry vertical menu bar positioning issue in IE

    I have been trying to fix a problem with my spry menu bar and have been looking for answers at several spry forums. I have modified my vertical spry menu to open submenus above and to the right of the main menu. It works in Opera, Firefox and Safari and opens below in IE. I tried changing the positioning from absolute to relative and that made it position itself below in all browsers. So, by deductive reasoning there seems to be something going on with IE when it reads the absolute positioning, is there a fix for this? You can see my website at raydlett.com the menubar is called STUDIO.
    Here is my vertical menubar CSS:
    @charset "UTF-8";
    /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
    ul.MenuBarVertical
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 6.75em;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* Menu item containers, position children relative to this container and are same fixed width as parent */
    ul.MenuBarVertical li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 6.75em;
    /* 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: 0 0 0 95%;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: absolute;
        z-index: 1020;
        cursor: default;
        width: 9.2em;
        left: -1000em;
        bottom:-1%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
        left: 0;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
        width: 9.2em;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
        border: 0px solid #fff;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
        border: 0px solid #fff;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
        display: block;
        cursor: pointer;
        background-color: #fff;
        padding: 0.5em 0.75em;
        color: #666;
        text-decoration: none;
    /* Menu items that have mouse over or focus have a white background and orange text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
        background-color: #fff;
        color: #FF4C00;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a white background and orange text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
        background-color: #fff;
        color: #FF4C00;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
        position: absolute;
        z-index: 1010;
        filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarVertical li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;
    Here are the associated global.css components:
    body  {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 76%;
        padding: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        margin: 0;
        background: #fff;
        color: #666;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        line-height: 1em;
    #container {
        width: 880px;
        text-align: left;/* this overrides the text-align: center on the body element. */
        margin-right: auto;/* the auto margins (in conjunction with a width) center the page */
        margin-left: auto;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        font-family: Verdana, Geneva, sans-serif;
    #header {
        font-size: 1em;
        padding-left: 17px;
        height: 26px;
        position: relative;
    ul {
        padding:0;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 10px; /* used for both menubar 1 and 2 */
        margin-left: 20px;/* used for both menubar 1 and 2 */
    li {
        margin:0;
        padding:0 0 0 5px;/* used for both menubar 1 and 2 */
    I have also attached the index.html file that uses the modified "STUDIO" Spry MenuBar2
    Any help on this would be greatly appreciated. Thanks in advance.
    ribit10

    That makes sense, tooltips are tooltips, and appear at the tip of the mouse...But those "submenu triggers" can be simply styled links (as they are in a spry menu)...don't need to be swaps or images or image maps.
    What about a using show/hide behavior? Click the STUDIO and the menu pops up adjacent in an apDiv. Click a link. Or click the x to close the apDiv.
    You know this is just an exercise to run through all the Javascript and Spry that is in Dreamweaver, eh?
    By the way, just providing a link to your page is quite all you need to do. You don't need to attach your files or show pictures of them...by providing a link, I can save a web page in its entirety and open it in Dreamweaver.
    Beth

  • Spry vertical menu bar size issue

    hello world,
    i've got a beautiful layout with a lefthand menu section that i would love to behave with pop-out menus.
    the entire design was crafted lovingly in fireworks and then exported as html with images, then opened in dreamweaver - looks great!
    remove the image that was in the slice where the menu will go, check.
    place cursor and select insert>spry>menu bar, select orientation, check.
    remove extraneous menu items in the properties inspector, check.
    and then, the problem...the box where "Item 1" (which will become my first button) is too big and shifts the entire table out of shape.
    i've edited the box sizes in the following CSS items:
    ul.MenuBarVertical
    ul.MenuBarVertical li
    ul.MenuBarVertical a
    sometimes i can get it close to it being in-shape with no shifting if i make the menu box smaller than the image that will go in it, looks great in DW but it is then shifted down by a considerable amount when previewing in browers. any pointers will be greatly appreciated.

    hi hans
    i can't upload at the moment, don't have the password to the site at the moment.
    for now the best i can do is post the CSS, and let you know that the size of the image i'd like to place in the parent spry menu is 168w x 32h (in px)
    i hope this isn't too much text....here goes:
    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
    ul.MenuBarVertical
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 150px;
        height: 25px;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ 
    ul.MenuBarActive 
        z-index: 1000; 
    /* Menu item containers, position children relative to this container and are same fixed width as parent */ 
    ul.MenuBarVertical li 
        margin: 0; 
        padding: 0; 
        list-style-type: none; 
        font-size: 100%; 
        position: relative; 
        text-align: left; 
        cursor: pointer; 
        width: 150px; 
        height: 25px; 
    /* 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 95%; 
        padding: 0; 
        list-style-type: none; 
        font-size: 100%; 
        position: absolute; 
        z-index: 1020; 
        cursor: default; 
        width: 8.2em; 
        left: -1000em; 
        top: 0; 
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ 
    ul.MenuBarVertical ul.MenuBarSubmenuVisible 
        left: 0; 
    /* Menu item containers are same fixed width as parent */ 
    ul.MenuBarVertical ul li 
        width: 8.2em; 
    DESIGN INFORMATION: describes color scheme, borders, fonts 
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
        border: 1px solid #CCC;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
        border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
        display: block;
        cursor: pointer;
        background-color: #EEE;
        color: #333;
        text-decoration: none;
        height: 25px;
        width: 150px;
        padding-top: 0.5em;
        padding-right: 0.75em;
        padding-bottom: 0.5em;
        padding-left: 0.75em;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
        background-color: #33C;
        color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
        background-color: #33C;
        color: #FFF;
    ul.MenuBarVertical a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;

  • Vertical Menu Bar with scroll

    How do I get a submenu to have a scroll bar?  My list goes past the bottom of the page and I would like the submenu to have a scroll bar to see the additional items.

    Sure, I couldn't see from here...did you actually have a link to your page?
    But you should have a comparable rule in the vertical menu:
    ul.MenuBarVertical ul
        margin: -5% 0 0 95%;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: absolute;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        left: -1000em;
        top: 0;
       height: 200px; /*make this value whatever you want to so that your menu stays on the page */
        overflow: scroll;
    You may need to actually specify submenus, too, but it should cascade from the above rule...
    ul.MenuBarVertical ul ul {
         height: 200px;
         overflow: scroll;
    If you TRULY only need one submenu to scroll, throw an ID on that submenu's ul and address it in the CSS with a special rule (leaving it off all the ones you don't want to scroll):
    ul#specialscroll {
         height: 200px;
         overflow: scroll;
    Beth

  • Rendering issue with IE 7 and Vertical Menu Bar

    Can anyone tell me why the menu bar at
    http://www.d16acbl.org/ works
    beautifully with Firefox, but with IE 7.0:
    1. The background of each submenu item doesn't block out
    underlying text,
    2. The submenu for meeting minutes wraps, and
    3. The third level menu for individual meeting minutes wraps?
    It's pretty much the standard css file from Spry, made to
    have auto width items as described here:
    http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthVerticalMenuBarSample.htm l
    Help would be appreciated.
    I attached the css file.
    Thanks

    I went back to Flash Player 8 and it works fine. I guess I
    will stay with Flash Player 8 until an update that fixes the
    problem comes out. Is it any version of Flash Player 9 that doesn't
    work or just the latest?

  • Fixing a set width for horizontal menu bar

    I'm using the Spry horizontal menu bar at the top of my page and want to put it as a set width that doesn't zoom or shrink in size when someone uses this function on their screen.  At the moment, when zooming, the menu wraps to the next line.  How can I stop this?  Does anyone know how to do this please?
    Many thanks,

    You can set the width of the menuitems as a percentage, you can also set a minimum width for the menubar container (UL).
    Gramps

  • Vertical Menu Bar with custom positioning

    I am working on a site that uses the very old mm_menu script. It is a PITA to maintain and modify. However, it allows on thing I have been unable to accomplish with Spry Vertical Menu -- the second level menus appear in the same vertical space as the first level menu. The normal operation for such menus is for the second level to start more or less with the vertical position of the first level button. But this means the second level often drops far below the bottom of the lowest first level button.
    Does anyone know of a way to customize where each second level appears (third and fourth are not needed)? Or some other UL/LI based menu code that can do this?

    Hi Bob,
    My first suggestion would be to re-order your navigation list to avoid the problem in the first place or figure out a different design altogether.  By re-ordering, I mean place menu items with the largest submenu at the top, and those with the smallest at the bottom.  Of course I understand there may be reasons not to do this, so here is what you can do to control where the menu positions itself.  The vertical positioning is controlled by "position: absolute;" style in all <ul>s contained within a <ul class='MenuBarVertical'>.  When you position something with absolute, it looks for its nearest parent that is positioned relatively (in this case the <li> items within <ul class='MenuBarVertical'>).  from there you can designate pixels or ems to offset from the top or bottom of the parent.  so an example of a way to do this is below.
    to give your menu the most control, you can assign each submenu its own class and decide its vertical positioning.
         your current html/css is something like:
        <style>
         ul.MenuBarVertical ul
              margin: -5% 0 0 95%;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              position: absolute;
              z-index: 1020;
              cursor: default;
              width: 8.2em;
              left: -1000em;
              top: 0;   /* <-------this is what you will change for each submenu */
         </style>
    so to change this you could assign a class name to each submenu to look something like this
    <ul class='MenuBarVertical'>
         <li>
              <a href='#' class='MenuBarItemSubmenu'>Item 1</a>
              <ul class='item_1'>
                   <li>sub1</li>
                   <li>sub2</li>
                   <li>sub3</li>
              </ul>
         </li>
         <li>
              <a href='#' class='MenuBarItemSubmenu'>Item 2</a>
              <ul class='item_2'>
                   <li>sub1</li>
                   <li>sub2</li>
                   <li>sub3</li>
              </ul>
         </li>
         <li>
              <a href='#' class='MenuBarItemSubmenu'>Item 3</a>
              <ul class='item_3'>
                   <li>sub1</li>
                   <li>sub2</li>
                   <li>sub3</li>
              </ul>
         </li>
         <li>
              <a href='#' class='MenuBarItemSubmenu'>Item 4</a>
              <ul class='item_4'>
                   <li>sub1</li>
                   <li>sub2</li>
                   <li>sub3</li>
              </ul>
         </li>
    </ul>
    and extend the class styling to control each menu's vertical position.  "top:0;" is what is default and aligns the top of the submenu with the top of its parent <li>.  Giving it a negative number would move the submenu up and a positive number would move it down (can be in pixels, ems, etc.).  You can also use "bottom:0;" to align the bottom of the submenu with the bottom of its parent <li>.  Giving it a negative number would move the submenu down, and a positive number would move it up.  So using the above menu/list format you could position each submenu exactly where you want to:
    <style>
         ul.MenuBarVertical ul
              margin: -5% 0 0 95%;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              position: absolute;
              z-index: 1020;
              cursor: default;
              width: 8.2em;
              left: -1000em;
              /* top: 0;  <-------comment this out or remove it.  we will set the position for each menu*/
         ul.MenuBarVertical ul.item_1
              top: 0;
         ul.MenuBarVertical ul.item_2
              top: -30px;
         ul.MenuBarVertical ul.item_3
              bottom: -2em;
         ul.MenuBarVertical ul.item_4
              bottom: 0;
         </style>
    Of course there are other ways to do this, but the lesson to remember is how absolute positioning works.  It looks for its nearest relatively positioned element and positions itself from that using top/bottom/left/right.  I hope this gives you a workable solution or at least gets you moving in the right direction.
    Dan

Maybe you are looking for