DropDown IE 7 aterrorizando

[gbrlsepulveda 0]

Bom dia, galera infelizmente estou aqui de novo com um problema, um menu dropdown, funciona muito bem no FF, Chrome, IE8, IE9,

mas ai tem o fd... do IE6 e IE7, o problema é quando o menu rola para baixo, nos outros browsers ele rola na boa, e fica por cima do conteudo, agora no IE6 e IE7, ele rola, mas fica por baixo do conteudo, ja pesquizei bastante na net, vi varios tópicos em varios foruns, já tentei mudar a position algumas vzs, já tentei usar "*z-index", e nada, preciso de uma luz, alguem poderia me ajudar ?

 

Segue abaixo o codigo do menu em html e css, acredito q oq está em jquery não precisaria ser mostrado, segue abaixo os outros:

 

HTML

       <div id="myslidemenu" class="jqueryslidemenu">

       <ul class='menu_topo'>


           <li id='li_about'>
             <a href='#' class='about'>About</a>

			   <ul class='submenubg_about'> 

						<li><a href='#'>Sobre Nós</a></li>

                 </ul>                
		   </li>


               <li id='li_informacoes'>
                   <a href='#' class='informacoes'>Informações</a>

                   <ul class='submenubg_info'> 
                            <li><a href='#'>Quem Somos</a></li>
                             <li><a href='#'>Nossa Revista</a></li>
                              <li><a href='#'>Publicidade</a></li>
                             <li><a href='#'>Trabalhe Conosco</a></li>
                           <li><a href='#'>Contato</a></li>                   
                 </ul> 

          </li>



               <li id='li_servicos'> 
                   <a href='#' class='servicos'>Serviços</a>
                        <ul class='submenubg_serv'> 

                           <li><a href='#'>Classificados</a></li>
                             <li><a href='#'>Promoções</a></li>
                              <li><a href='#'>Informações</a></li>

                              <li><a href='#'>Mapas</a></li>
                             <li><a href='#'>Cameras Online</a></li>
                           <li><a href='#'>Telefones Úteis</a></li>

                 </ul>                       
          </li>


              <li id='li_canais'>
                   <a href='#' name='canais' class='canais'>Canais</a>

                        <ul class='submenubg_canais'> 

                           <li><a href='#'>Bairros</a></li>
                            <li><a href='noticias.php'>Notícias</a></li>
                             <li><a href='#'>Noite na Barra</a></li>
                              <li><a href='#'>Lazer e Cultura</a></li>
                               <li><a href='#'>Guia Bairro</a></li>

                                <li><a href='#'>Artigos</a></li>
                                <li><a href='#'>Entrevistas</a></li>
                               <li><a href='colunas.php'>Colunas</a></li>
                              <li><a href='#'>Fotos e Eventos</a></li>
                             <li><a href='#'>Copa do Mundo</a></li>
                            <li><a href='#'>Olímpiadas</a></li>

                           <li><a href='#'>Fondue</a></li>

                       </ul>               
                  </li>

        </ul> 

	         </div>
       <!-- FIM DO MENU DD NO TOPO  ###############################    -->

 

CSS

@charset "utf-8";
/* CSS Document */
.jqueryslidemenu {
width:100%;
*z-index:99;
}

.jqueryslidemenu ul {
list-style-type:none;
*z-index:98;
display:block;
margin:0;
padding:0;
}

/*Top level list items*/
.jqueryslidemenu ul li {
position:relative;
float:right;
display:inline;
*z-index:97;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a {
display:block;
color:#09C;
text-decoration:none;
*z-index:96;
padding:4px 10px 15px;
}

* html .jqueryslidemenu ul li a {
display:inline-block;
*z-index:95;
}

.jqueryslidemenu ul li a:link,.jqueryslidemenu ul li a:visited {
color:#FFF;
}

.jqueryslidemenu ul li a.canais:hover, .jqueryslidemenu ul li#li_canais:hover {
color:#FFF;
background-image:url(../images/menu/teste_menu_img.png);
background-repeat:no-repeat;
background-position:5px 0;
*z-index:94;
}

.jqueryslidemenu ul li a.servicos:hover, .jqueryslidemenu ul li#li_servicos:hover {
color:#FFF;
background-image:url(../images/menu/teste_menu_maior.png);
background-repeat:no-repeat;
background-position:3px 0;
*z-index:93;
}

.jqueryslidemenu ul li a.informacoes:hover, .jqueryslidemenu ul li#li_informacoes:hover {
color:#FFF;
background-image:url(../images/menu/teste_menu_info.png);
background-repeat:no-repeat;
background-position:1px 0;
}

.jqueryslidemenu ul li a.about:hover, .jqueryslidemenu ul li#li_about:hover {
color:#FFF;
background-image:url(../images/menu/teste_menu_about.png);
background-repeat:no-repeat;
background-position:5px 0;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul {
position:absolute;
left:0;
display:block;
visibility:hidden;
z-index:1;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {
display:list-item;
background-color:#500;
float:none;
z-index:1;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul {
top:0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a {
width:180px;
font-size:14px;
line-height:22px;
border-top-width:0;
border-bottom:1px solid #500;
text-align:left;
background-color:#600;
background-image:none;
margin:0;
padding:0 0 0 5px;
}

.jqueryslidemenu ul li ul.submenubg_canais li a:hover,.jqueryslidemenu ul li ul.submenubg_info li a:hover,.jqueryslidemenu ul li ul.submenubg_serv li a:hover {
background-color:#500;
background-image:none;
}

.submenubg_info,.submenubg_canais,.submenubg_serv {
background-image:none;
background-color:#600;
color:#500;
}

[Guilherme Oderdenge 42]

Cara, vou te falar, o seu script está bastante legal, e, acredite, o problema não está nele.

Pra te falar a verdade, eu nem faria compatibilidade com o IE 6 e 7, afinal, já estão "obsoletos".

 

Mas, para não te deixar na mão, sugiro você forçar um z-index nas divs de fundo e na div do menu, sendo 1 as divs de fundo, e 999 a div do menu. Quem sabe isso pode resolver.

 

Abraços!

[gbrlsepulveda 0]

E aew cara, obrigado pela resposta, mas cara, eu tentei muito mudar a z-index, botei no conteudo, botei no menu, e de formas diferentes tanto assim [z-index] como [*z-index] que seria o hack só para o IE7, mas não rolou, por mim eu debandava do IE7, mas o patrão quer que role no IE7, ai ja viu neah :S

vou continuar testando, mas ta complicado, rsrsrs, vlw pela resposta, obg

[Marcos Xavier 189]

Ve se esse tuto te ajuda >>>>

http://maujor.com/tutorial/condcom.php

[gbrlsepulveda 0]

pow obrigado por responder, mas eu uso no css um condicional pro IE7,

de certa forma o tuto é util, mas não resolve meu caso, mesmo assim

obrigado

[Evandro Oliveira 331]

Poste um link para visualização online. Caso seja projeto de agência, retire marcas e nomes, e substitua os textos por lorem ipsum.

 

Há a possibilidade do problema estar no plugin. Também não vejo necessidade de definir tanto z-index.

 

 

Complementando, a propriedade z-index só tem efeito quando o elemento tem position diferente de static (padrão).

 

 

[gbrlsepulveda 0]

ele já está hospedado, mas está visivelmente incompleto, o link é esse http://www.barranews.net/