Previous Message
Next Message

dynamic menus and z-index? (formerly More SOS)

Sent by Pkruep on 24 March 2006 14:02


I'm new to this group, but not so new to CSS. I'm having a problem with
some dynamic menus and need help. I searched the archives and the
closed thing I came to the problem I have was the thread "More SOS
Problems." But I'm getting ahead of myself. :)

Basically, I have a vertical menu with fly-out style submenus. The
design calls for the hovered menu item to change to a white background
with a yellow border. Simple enough. Then I found that the hovering
caused unpleasant shifting as the button (list elements) changed from
having no border to having a border. Ok, easy enough to fix. I simply
added a border the same color as the menu background. Now I noticed
that, while the menus themselves appear over the content like they
should, they seem to overlap each other. That is, a sub menu will sit
over it's own parent menu, but the parent menu's neighbors sit over the
sub menu. The menus themselves have enough distance that the text
doesn't overlap (but it probably would if font-sizes were increase).
However, the aforementioned borders do show up and it is quite
distracting. I tried removing the position:relative style for the li
elements in the menu and that solved the problem beautifully.
Unfortunately, the sub menus no longer know where to go. I was using
position:absolute for the sub menus along with position:relative for
the parent menus. With no position:relative for the parent menu, the
sub menus all end up at the top of the menu. With no position:aboslute
(or using position:relative) on the sub menus, the sub menus appear
within the parent menu's space and blows everything out.

Here is a link that shows where I'm at:

I've looked at this problem too long. How do I have properly positioned
sub menus without neighboring parent menus peaking through and avoid
"jumping" from the borders?

Also, so far I've only checked in FF/Win and IE6/Win. If anyone happens
to catch any weirdness in other browsers, I'd be happy to know about
it. And if anyone has any suggestions for doing something better, I'd
also be very happy to hear them.

Thank you!

-Patricia Kruep

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: