Hi,
I am basically trying to accomplish drop down menus for navigation on
a site. And I'm pretty much done except I am having one problem. The
z-index is not working with relative positioning!
Basically I have a page such as this:
http://members.rogers.com/asadkhan2/prob2.jpg
Now, see those home, solutions, etc. links? When a mouse rolls over
them, I want a drop down menu to appear; however, I want it to float
over the content, and not push the content downwards. (I blurred out
the content due to copyright issues). Initially I was using visibility
property; but then I found out that it leaves the white space attached
with the sublinks. So I opted for display property instead. Now here
is my CSS code (partial):
div.sublinksdiv {
z-index:+1;
margin-left:auto;
margin-right:auto;
position:relative;
display: none;
}
and here is how I am using it in my page:
<div id="idsublinks" class="sublinksdiv">
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="750"
id="AutoNumber2">
<tr>
<td width="20%" ></td>
<td width="20%" class="sublinks"
onmouseover="this.className='sublinkhilite';showLa yer('idsublinks')"
onmouseout="this.className='sublinks';hideLayer('i dsublinks')">
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 1</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 2</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 3</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 1</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 2</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 3</div>
</td>
<td width="20%" ></td>
<td width="20%" ></td>
<td width="20%" ></td>
</tr>
</table>
</div>
(Ignore the sublinkhilite stuff; its not the issue at hand. It only
gives a cool rollover effect when mouse moves over sublinks).
And here is my javascript code:
function showLayer (layerName) {
if (document.getElementById) {
var targetElement = document.getElementById(layerName);
targetElement.style.display = 'block';
}
}
function hideLayer(layerName) {
if (document.getElementById)
{
var targetElement = document.getElementById(layerName);
targetElement.style.display = 'none';
}
}
All this gives me the following result:
http://members.rogers.com/asadkhan2/prob1.jpg
As you can see, when a mouse rolls over the main links, the sublinks
do appear at appropriate location; however it pushes down the content!
When mouse rolls out, the content moves back up and picture looks like
prob2.jpg again.
Now this just looks ridiculous how the content moves around. Basically
the z-index property isn't functioning. Interestingly enough
"position: absolute" makes z-index work perfectly! However, then the
position gets all messed up with different sized windows as I am
centering everything. (There is no fixed left position for the submenu
to appear: its RELATIVE).
How can I fix this? Sorry about the lengthy description; but I just
wanted to make it clear for others and myself.
Thanks.
Asad