First post here, and I need some help. I'm trying to do a simple verticle spry menu with a total of 3 levels (i.e., 2 levels of submenus). Everything is lined up the way I want, except for the lowest menu level. On rollover, this last level (the one labeled "Individual") appears on top of the 2nd level submenu (on top of "Therapy" to be exact). I want the lowest menu level to be exactly side-by-side with the 2nd menu level (like I have with the 1st and 2nd menu levels). Specifically, I want the 2nd menu level to keep it's current width (i.e., I don't want "Workshops/Presentations" to be word wrapped. I've been fiddling with this for days with no luck. Please help! Below is the code:

Hmmm...tried your code and the lowest level menu items are still covering up the 2nd level menu when I mouse over the 2nd level submenu item. I think it's a problem in my CSS, now that I think of it. Here's the relevant section of my CSS file:

Basically, the 2nd level submenu is correct when NOT moused over, and looks like this:
Services ->

When I mouse over it, it looks like this:
ServicIndividual (the 3rd level menu being layered on top of the 2nd level menu)

I want it to look like:
Services -> Individual

I keep trying to shift the <ul> to the right so the 3rd level won't overlap the 2nd level, but that moves all <ul> levels to the right. That then creates a gap betweent the first level of the menu and the 2nd level.

edbr

08-19-2008, 02:17 AM

where you have
/* 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 0;try
margin: -5% 0 0 95%;

Irimi-Ai

08-19-2008, 05:05 PM

Ok, got the alignment issues sorted out. Now I'm running into another problem. I'm having issues with IE (6 & 7...surprise, surprise). I think it has to do with the whitespace:nowrap on the 2nd level menu items. I want the 2nd level menu to be different width than the 3rd level, so I have both levels set to auto width with nowrap.

This is how it looks in IE 7:
http://img517.imageshack.us/img517/6674/menuiniecopywc6.jpg

This is how it looks in Opera (correct):
http://img517.imageshack.us/img517/2713/menuinoperaln3.jpg

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
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%;
}