Spry menuBarvertical submenu jumbs in IE7

Question

Hi,
I've made a vertical menu which doesn't work well.
I know I'm doing something wrong, but what?
The site is: http://www.styling4home.com/styling4home.html
The 4th menu button has two submenu's which jumb.
I've tried to change the position, but this didn't help.
Who can/will help me?
Thanks a lot for your reply!
Regards.
Carla

Answer 1

Hi, Carla,
Here is what I did to make your vertical menus behave (I will show you only the rules I changed from your stylesheet):
/* 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: 1em;
     position: relative;
     text-align: left;
     cursor: pointer;
     width: 14em;
/*     z-index: 100;  You don't need this.
/* 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) */ Because you are dropping the submenus below the main menu items instead of having them fly out to the right, we'll put the top and left positioning in this rule, which will apply to all submenus
ul.MenuBarVertical ul
/*     margin-top: -10%;*/ Delete this and add
     margin-top: 2.5em; this, to replace a measure you added below (top: 2.5em;).
     margin-right: 0;
     margin-bottom: 0;
/*     margin-left: 95%;*/ Delete this and add
    margin-left: 4em;  this, to replace a measure you added below (left: -12em;) adjust as needed...
     padding: 0;
     list-style-type: none;
     font-size: 0.9em;
     position: absolute;
     z-index: 1020;
     cursor: default;
     width: 12em;
     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: -12em;*/ Style this on previous rule; it will also apply to this selector.
  left: 0;  Restore this original specification.
/*     z-index: 200; You don't need this.
     line-height: 10px;  or this...if you want to adjust submenu line-height, put it in the rule for ul.MenuBarVertical ul li a
     top: 2.5em; This is also styled above (margin-top: 2.5em;)
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
     display: block;
     cursor: pointer;
     background-color: #422C2B;
     color: #FFF;
     text-decoration: none;
     padding-top: 0.5em;
     padding-right: 0.75em;
     padding-bottom: 0.5em;
     padding-left: 0.75em;
/*     visibility: visible; You don't need these
     z-index: auto;
Best,
Beth