2 replies to this topic

[Neffertine]

Olá a todos!

Creio que esta dúvida já apareceu muitas vezes no fórum, mas como não achei nenhuma das soluções cabíveis ao meu problema resolvi postar.

Tenho um Menu drop down em CSS no meu site. Logo abaixo dele na ordem natural da pagina vem um combo select. O problema é que no IE 6 o Select sobrepoem o menu, uma vez que IE6 não reconhece z-index.

Preciso que o drop down do menu fique por cima deste select. Como eu faço? Estou desesperada rss

Segue códigos::

HTML
[codebox]<div id="dv_menu">
<div id="menu_container">
<ul id="pmenu">
<li><a href="Frm_inicio.aspx">Início</a></li>
<li class="drop"><a href="#nogo">Remessa<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Frm_RemessaTerceirizada.aspx" class="enclose">Terceirizada</a></li>
<li><a href="Frm_RemessaCredor.aspx">Credor</a></li>
<li><a href="Frm_HistoricoTerceirizada.aspx">Histórico Terceirizada</a></li>
<li><a href="Frm_HistoricoCredor.aspx">Histórico Credor</a></li>
</ul>
</li><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</ul>
</div>
</div>[/codebox]


CSS
[codebox]/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {margin:0px 0 100px 15px; top:0px; position:absolute; width:735px; height:17px; z-index:100;}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none; left: 120px !important; top:16px !important;z-index:100;}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {display:block;width:150px; font-size:11px; color:#000000; height:20px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #eaeaea; border-width:1px 0 1px 1px;z-index:100;}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#pmenu li {float:left; background:#eaeaea;z-index:100;}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {background:#57b0c3; color:#000000;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {display:block; position:absolute; top:-21px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:150px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:22px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#57b0c3; color:#000000;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#57b0c3; color:#000000;}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#eaeaea}
#pmenu li.drop {background:#eaeaea}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */[/codebox]

[Nicholas Pufal]

z-index não funciona no IE? Acho que teu problema é outro... Z-index funciona sim no IE.

Em um trabalho que fiz para uma loja de chocolates, usei z-index para sobrepor no menu uma imagem com o choco escorrendo. Funciona em qualquer browser e usei z-index só, sem hack nenhum.

Tô na corrida agora, mas quando voltar pra casa dou uma olhada com mais calma no teu código.

[Neffertine]

Olá Firehalk!

O IE6 Até aceita z-index, mas há alguns componentes que ele não entende bem, como o combo, iframe e outros. nesses casos, mesmo que você coloque um z-index enorme, o elemento que está por cima, será sobreposto pelo combo por exemplo.

O que eu fiz? Coloquei via javascript um iframe entre o combo e o meu menu. Assim o z-index entre os dois funciona e consigo colocar meu menu por cima do iframe!!

Obrigada pela dica de qualquer forma!!