Menus and Z-index

[Microsoft Newsserver]

Here's a puzzle!!!!!!
When menu item 2 is hovered over, the list of sub items passes between
"divIndicators" and "divTimeBandContainer". It "seems" that the sub item
list calculates its z-index based on the next object down, but objects which
are inside that one which of course incrementally increase so the menu
passes below them.

How can I force the menu system to use the highest possible z-index.


( Kinda Pseudo code below for structure )
<div id="divMenuContainer" >
[ MENU ITEM ] [ MENU ITEM 2 ] ->[subitem1][subitem2]
</div>
<div id="divIndicators">
<div id="divTimebandContainer">
<table> .................................</table>
</div>
</div>

 

[Cowboy \(Gregory A. Beamer\)]

There are a couple of ways to handle this.

Cheap, down and dirty: Set CSS on the menu item (this is not very fine
grained in the standard menu implementation) and set z-order as one item in
the CSS. This many be what you have already tried?

Less down and dirty: Use the CSS Friendly Adapters and output the menu as
<ul><li></li></ul>. This gives you more control, as you can set z-order on
more levels.

Hard way (not really, but harder): Use the CSS Friendly Adapters and edit
hte default code (there are plenty of good reasons to do this, IMO). You can
then set up a wide variety of rules to get the levels of your menu to act
how you desire.

 

[bruce barker]

unless you are setting the z-order of the of the div's, you should be ok.
maybe you are seeing the behavior of <select>'s (dropdowns) in IE. in IE
(until version 7), selects are in window infront of all the html, so there is
no way to get any html content to be on top, no matter the z-order. as
iframes have their own window, you can use an iframe to get content to float
on top of a select.

a common fix for IE is to hide any select the menu would float over.


-- bruce (sqlwork.com)