|
|
Posted by Shelly on 11/06/07 13:44
In IE (7) the drop down submenus are hiding behind the element below it.
They work fine in Firefox and Opera. I researched this issue on the web and
found suggestions to state position and z-index in the css file. I already
had position: relavive and a z-index set as high as 500. I changed to
position: absolute, but that didn't help.
Here are the important parts of the css file and style in the hope that
someone can see something. The submenu is class item2 and the next element
is item-03. I've include snippets of code, css and in-line style.
menu code snippet:
==============
<td>
<a class="item1" href="javascript:void(0);">Top-level Item</a>
<div class="section">
<a class="item2" href="#"> Sub-level Item 1</a>
<a class="item2" href="#"> Sub-level Item 2</a>
</div>
</td>
inline snippet:
==========
#index-03 {
position:absolute;
left:0px;
top:134px;
width:750px;
height:436px;
background-image: url(images/index_03.gif);
border-right: 2px solid #7C6736;
z-index:100
}
css snippet:
========
..ddmx .item2,
..ddmx .item2:hover,
..ddmx .item2-active,
..ddmx .item2-active:hover {
padding: 3px 0px 4px 0px;
color: #FFFFFF;
text-decoration: none;
text-indent:5px;
width:179px;
display: block;
white-space: nowrap;
position: relative;
z-index: 500;
}
..ddmx .item2 {
background: #A7A4C1;
}
..ddmx .item2:hover,
..ddmx .item2-active,
..ddmx .item2-active:hover {
background: #414162;
}
..ddmx .arrow,
..ddmx .arrow:hover {
padding: 3px 16px 4px 8px;
}
..ddmx .item2 img,
..ddmx .item2-active img{
position: absolute;
top: 4px;
right: 1px;
border: 0;
}
..ddmx .section {
border: 1px solid #A7A4C1;
position: absolute;
visibility: hidden;
z-index: -1;
}
* html .ddmx td { position: relative; } /* ie 5.0 fix */
Navigation:
[Reply to this message]
|