Hi there
I am having some trouble with my CSS dropdown menus.
I have a floated div that contains a welcome paragraph and a menu that drops down. What is happening is that the menu is being drawn behind the text of the welcome paragraph (see attached image).
Here are the classes...
This draws the welcome text
Code:
#welcome
{
float:left;
z-index:0;
width : 360px;
height:160px;
margin-left:10px;
margin-top:30px;
font-size: 0.8em;
}
And this is the classes for the dropdown
Code:
.dropdownlink a
{
display:block;
width:150px;
height:19px;
font-size:0.8em;
color:#000000;
background: url(../images/nav_drop_bg.gif) top left no-repeat;
text-decoration: none;
padding-left:10px;
z-index:1000000000;
}
and this is the HTML for the menu...
Code:
<div id="nav_1" style="visibility:hidden; position:absolute; top: 37px; left:28px; height:100px; width:128px;">
<div class="dropdownlink"><a href="">Pain</a></div>
<div class="dropdownlink"><a href="">Pain</a></div>
<div class="dropdownlink"><a href="">Pain</a></div>
<div class="dropdownlink"><a href="">Pain</a></div>
<div class="dropdownlink"><a href="">Pain</a></div>
</div>
has anyone got any idea why this is ignoring the Z-index? It works in Opera, but in looks crap in IE. Is this a common problem, are there any workarounds.
Please help, I'm pulling my hair out !
Dev Shed Forums Sponsor:
March 29th, 2004, 06:52 AM
floated Div draws text over dropdown CSS
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
