This fix by Ingo Chao for a related problem with IE6 also cures this one.
_________________________
skugler at kepcopower.com wrote:
> Dropdown navigation on www.kepcopower.com/index-chargers.htm works fine in
> Firefox and Mozilla, but in IE6, the dropdowns get covered by (are behind)
the
> rightmost link (BATTERY CHARGERS) when the window is small enough to cause it
to
> wraparound and be beneath one of the dropdowns. I tried playing with z-index,
> but don't really know what I'm doing and it did not help.
>
> CSS is www.kepcopower.com/menu04-pic.css
>
> Any ideas or help would be most appreciated.
>
> Thanks in advance,
> Steve
The reason for this problem in IE6, IE7 is that position:relative itself
sets a new stacking context.
(It shouldn't, without having a z-index.)
so your
#menu li {position:relative}
arrests all stacking operations of its child elements. These play only
in the sandbox of that li. No matter what z-index they get, they cannot
escape out of this stacking context of their parent li.
Any li following in the source is nearer to the viewer.
"Battery Chargers" is nearer than "Products"
If "Products" is hovered and the drop down drops down: "Battery
Chargers" still is nearer to the viewer.
A fix is to reset position to static, and let it become relative only on
hover:
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li { position:static; }
#menu ul li.onhover, #menu ul li:hover { position:relative; }
</style>
<![endif]-->
With this fix, the stacking context is only performed when it's really
needed.
Ingo
____________________Reply Separator____________________
Subject: Re[2]: [css-d] IE7 dropdown submenu shows behind menu
Author: Steve Kugler
Date: 2/12/2007 5:38 PM
Haven't had much time to do more experimenting, but adding width:auto didn't
work in Firefox, Opera and Netscape. Thanks for the suggestion though.
Steve
____________________Reply Separator____________________
Subject: Re: [css-d] IE7 dropdown submenu shows behind menu
Author: =?ISO-8859-1?Q?Gunlaug_S=F8rtun?= <[EMAIL PROTECTED]>
Date: 2/10/2007 6:04 PM
[EMAIL PROTECTED] wrote:
> [...]
> URL: http://www.kepcopower.com/a-test2.htm
> Ideally, it would be nice if the submenus consistently opened
> adjacent to the menus without covering them for all browsers, but I
> had no luck trying to get that to work in Firefox, Opera, etc. so I
> would settle for the submenu opening on top of the menu.
I would *not* settle for that!
Try adding...
#menu ul ul {width: auto;}
...and see if that doesn't solve your problem. It does for me in Opera,
Firefox and Safari - placing the sub-menu adjacent to its parent.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
