Z-index problem

windows · Jan 9, 2008

Hi, 
 
What i am doing is a dynamic menu for my site, when you hover over one of the top icons, a menu drops down beneath it. But all the text below the menus, which are floating in div's and are style.visibility = hidden, you can't cursor or click on because ther is a menu above it. I st the z-index of the menus to be -1000 but it ddn't work. 
 
Is there some way which you can tell the menu to be under the text without telling the text to be on top??could i have a URL or screenshot please?Did you set your pop-out menu to be absolutely positioned? A positive z-index on an absolutely positioned element will make it appear on top of the regular page. The highest z-index gets placed above all other elements. 
 
Is it a Dynamic HTML menu? If that's the case, check out <a class="postlink" href="http://users.tm.net/gburghardt/home/">http://users.tm.net/gburghardt/home/</a> for one that I created. Feel free to peruse the code.Here is the screen shot of the menu when you hover over the top bar. You can't click on anything underneath the menu when it is hidden. Here is the code first: 
<script src=http://www.webdeveloper.com/forum/archive/index.php/"menu.js"></script> 
<div style=" top: 1; position: absolute"> 
<table id="tab" style="z-index:-1000;" border="0" width="100%" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="100%" colspan="5"> 
<table border="1" width="100%" bgcolor="#000000"> 
<tr> 
<td onmouseover="drop('a');" width="20%" align="center">Home</td> 
<td onmouseover="drop('b');" width="20%" align="center">You</td> 
<td onmouseover="drop('c');" width="20%" align="center">Learning</td> 
<td onmouseover="drop('d');" width="20%" align="center">Contact</td> 
<td onmouseover="drop('e');" width="20%" align="center">Bib</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td onmouseover="drop('a');" onmouseout="up('a');" style="visibility: hidden; z-index:-1000" id="a" width="20%" valign="top" align="center"> 
<table border="1" width="100%" bgcolor="#000000" height="106" > 
<tr> 
<td width="100%" height="21" align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"go.php?to=home">Home</a></td> 
</tr> 
<tr> 
<td width="100%" height="21" align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"go.php?to=school.htm">My 
School</a></td> 
</tr> 
<tr> 
<td width="100%" height="21" align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"go.php?to=about_me.htm">About 
Me</a></td> 
</tr> 
<tr> 
<td width="100%" height="21" align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"go.php?to=friends.htm">Friends</a></td> 
</tr> 
<tr> 
<td width="100%" height="19" align="center"><a href=http://www.webdeveloper.com/forum/archive/index.php/"go.php?to=more_photo.htm">Gallery</a></td> 
</tr> 
</table> 
</td> 
<td onmouseover="drop('b');" onmouseout="up('b');" style="visibility: hidden; z-index:-1000" id="b" width="20%" valign="top" align="center"> 
<table border="1" width="100%" bgcolor="#000000" > 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
</table> 
</td> 
<td style="visibility: hidden; z-index:-1000" onmouseover="drop('c');" onmouseout="up('c');" id="c" width="20%" valign="top" align="center"> 
<table border="1" width="100%" bgcolor="#000000" > 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
</table> 
 </td> 
<td onmouseover="drop('d');" onmouseout="up('d');" style="visibility: hidden; z-index:-1000" id="d" width="20%" valign="top" align="center"> 
<table border="1" width="100%" bgcolor="#000000" > 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
</table> 
 </td> 
<td onmouseover="drop('e');" onmouseout="up('e');" style="visibility: hidden; z-index:-1000" id="e" width="20%" valign="top" align="center"> 
<table border="1" width="100%" bgcolor="#000000" > 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
<tr> 
<td width="100%" align="center"> </td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</div> 
 
 
 Thats o.k everyone, problem solved. I took it the long way and decided to put a div on every page so tht the content of the page is higher that the menu, and in the menu script, when you hover over the icons for the menu, it rasiss the menu's z-index higher than that of the page contoent, the lowers it when your mouse is off.

Z-index problem

windows

Guest