Menu suspenso em CSS não funciona no IE

glamours · Outubro 21, 2011

Olá,

Desculpe me se eu esiver em tópico errado, mas como o menu é gerado em lista e com código CSS acredito estar no lugar certo.

Eu uso o Wordpress tenho várias páginas e sub-páginas e preciso de um menu suspenso (dropdown). Uso o plugin "Multi-level" que como falado, gera uma lista não ordenada aliada ao CSS.

Funciona beleza no Firefox, no Safari e Chrome, mas não funciona no Internet Explorer.

No IE aparce o menu pai, mas os menus não se abrem!

#suckerfishnav {
   background:#333333 repeat-x;
   font-size:16px;
   font-family:times,serif;
   width:100%;
   }
#suckerfishnav, #suckerfishnav ul {
   float:left;
   list-style:none;
   line-height:40px;
   padding:0;
   margin:0;
   width:100%;
   }
#suckerfishnav a {
   display:block;
   color:#FFFFFF;
   text-decoration:none;
   padding:0px 10px;
   }
#suckerfishnav li {
   float:left;
   padding:0;
   }
#suckerfishnav ul {
   position:absolute;
   left:-999em;
   height:auto;
   width:200px;
   font-weight:normal;
   margin:0;
   line-height:1;
   border:0;
   }
#suckerfishnav li li {
   width:200px;
   font-family:times,serif;
   }
#suckerfishnav li li a {
   padding:4px 10px;
   width:200px;
   font-size:16px;
   color:#FFFFFF;
   }
#suckerfishnav li ul ul {
   margin:-23px 0 0 200px;
   }
#suckerfishnav li li:hover {
   background:#2580a2;
   }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
   color:#FFFFFF;
   }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
   color:#FFFFFF;
   }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
   color:#FFFFFF;
   }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
   left:-999em;
   }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
   left:auto;
   background:#333333;
   }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
   background:#2580a2;
   }

João Prado · Outubro 21, 2011

Tem algum link para o site? Algum imagem do problema?

Poste o HTML gerado também, pois só com o css é difícil saber.

Pelo que vejo no seu CSS, seu HTML pode ter alguns erros na criação das listas.

glamours · Outubro 21, 2011

Olá,

Não aparece nenhum erro no IE, simplesmente não funciona o menu suspenso.

Foto como o menu deve fica (tirado no Firefox)

http://imagezilla.net/show/32034dropdown.jpg

Segue abaixo o código gerado pelo WordPress:

[
<!-- Multi-level Navigational Plugin by PixoPoint Web Development ... http://pixopoint.com/multi-level-navigation/ -->

<div id="pixopoint_menu_wrapper1">
<div id="pixopoint_menu1">
	<ul class="sf-menu" id="suckerfishnav"><li class="page_item page-item-6 current_page_item"><a href="/" title="Inicial">Inicial</a></li>
<li class="page_item page-item-730"><a href="/contato/" title="Contato">Contato</a></li>
<li class="page_item page-item-11 haschildren"><a href="/produtos/" title="Produtos">Produtos</a>
<ul class='children'>
<li class="page_item page-item-489 haschildren"><a href="/produtos/complementos/" title="Complementos">Complementos</a>
<ul class='children'>
	<li class="page_item page-item-507"><a href="/produtos/complementos/namoradeira/" title="Namoradeira">Namoradeira</a></li>
	<li class="page_item page-item-490"><a href="/produtos/complementos/pojftb-pojfpp/" title="POJFTB + POJFPP">POJFTB + POJFPP</a></li>
</ul>
</li>
<li class="page_item page-item-86 haschildren"><a href="/produtos/escadas/" title="Escadas">Escadas</a>
<ul class='children'>
	<li class="page_item page-item-42"><a href="/produtos/escadas/abrir-e-extender/" title="Abrir e Extender">Abrir e Extender</a></li>
	<li class="page_item page-item-142 haschildren"><a href="/produtos/escadas/articuladas/" title="Articuladas">Articuladas</a>
	<ul class='children'>
		<li class="page_item page-item-144"><a href="/produtos/escadas/articuladas/articuladas-10-x-1/" title="Articuladas 10 X 1">Articuladas 10 X 1</a></li>
		<li class="page_item page-item-165"><a href="/produtos/escadas/articuladas/articuladas-3-x-1/" title="Articuladas 3 X 1">Articuladas 3 X 1</a></li>
	</ul>
</li>
	<li class="page_item page-item-177 haschildren"><a href="/produtos/escadas/comerciais/" title="Comerciais">Comerciais</a>
	<ul class='children'>
		<li class="page_item page-item-182"><a href="/produtos/escadas/comerciais/comercial-4-x-1/" title="Comercial 4 X 1">Comercial 4 X 1</a></li>
	</ul>
</li>
	<li class="page_item page-item-84 haschildren"><a href="/produtos/escadas/domesticas/" title="Domesticas">Domesticas</a>
	<ul class='children'>
		<li class="page_item page-item-80"><a href="/produtos/escadas/domesticas/alustep/" title="Alustep">Alustep</a></li>
		<li class="page_item page-item-127"><a href="/produtos/escadas/domesticas/mega/" title="Mega">Mega</a></li>
		<li class="page_item page-item-118"><a href="/produtos/escadas/domesticas/prima/" title="Prima">Prima</a></li>
		<li class="page_item page-item-136"><a href="/produtos/escadas/domesticas/super-alustep/" title="Super Alustep">Super Alustep</a></li>
	</ul>
</li>
	<li class="page_item page-item-62"><a href="/produtos/escadas/paralela-e-conica/" title="Paralela e cônica">Paralela e cônica</a></li>
	<li class="page_item page-item-13 haschildren"><a href="/produtos/escadas/profissionais/" title="Profissionais">Profissionais</a>
	<ul class='children'>
		<li class="page_item page-item-73"><a href="/produtos/escadas/profissionais/pintor/" title="Pintor">Pintor</a></li>
	</ul>
</li>
</ul>
</li>
<li class="page_item page-item-190 haschildren"><a href="/produtos/esquadrias/" title="Esquadrias">Esquadrias</a>
<ul class='children'>
	<li class="page_item page-item-198"><a href="/produtos/esquadrias/class20/" title="Class 20">Class 20</a></li>
	<li class="page_item page-item-308"><a href="/produtos/esquadrias/fortaleza/" title="Fortaleza">Fortaleza</a></li>
	<li class="page_item page-item-206"><a href="/produtos/esquadrias/hydro/" title="Hydro">Hydro</a></li>
	<li class="page_item page-item-281 haschildren"><a href="/produtos/esquadrias/maxi/" title="Maxi">Maxi</a>
	<ul class='children'>
		<li class="page_item page-item-285"><a href="/produtos/esquadrias/maxi/janela-2-folhas/" title="Janela 2 folhas">Janela 2 folhas</a></li>
		<li class="page_item page-item-295"><a href="/produtos/esquadrias/maxi/janela-4-folhas/" title="Janela 4 folhas">Janela 4 folhas</a></li>
		<li class="page_item page-item-302"><a href="/produtos/esquadrias/maxi/porta-de-correr/" title="Porta de correr">Porta de correr</a></li>
	</ul>
</li>
	<li class="page_item page-item-232 haschildren"><a href="/produtos/esquadrias/super/" title="Super">Super</a>
	<ul class='children'>
		<li class="page_item page-item-230"><a href="/produtos/esquadrias/super/basculante/" title="Basculante">Basculante</a></li>
		<li class="page_item page-item-278"><a href="/produtos/esquadrias/super/grade/" title="Grade">Grade</a></li>
		<li class="page_item page-item-261"><a href="/produtos/esquadrias/super/janela-2-folhas/" title="Janela 2 folhas">Janela 2 folhas</a></li>
		<li class="page_item page-item-270"><a href="/produtos/esquadrias/super/maxim-air/" title="Maxim-Air">Maxim-Air</a></li>
	</ul>
</li>
</ul>
</li>
<li class="page_item page-item-321"><a href="/produtos/moveis/" title="Móveis">Móveis</a>
<ul class='children'>
	<li class="page_item page-item-530 haschildren"><a href="/produtos/moveis/banquetas/" title="Banquetas">Banquetas</a>
	<ul class='children'>
		<li class="page_item page-item-545"><a href="/produtos/moveis/banquetas/aluminio-e-madeira/" title="Alumínio e Madeira">Alumínio e Madeira</a></li>
		<li class="page_item page-item-552"><a href="/produtos/moveis/banquetas/angra-plus-e-aluminio/" title="Angra Plus e Alumínio">Angra Plus e Alumínio</a></li>
		<li class="page_item page-item-579"><a href="/produtos/moveis/banquetas/bma-bma-bn-bp/" title="BMA – BMA – BN – BP">BMA – BMA – BN – BP</a></li>
		<li class="page_item page-item-541"><a href="/produtos/moveis/banquetas/junco-e-junco-fita/" title="Junco e Junco Fita">Junco e Junco Fita</a></li>
		<li class="page_item page-item-562"><a href="/produtos/moveis/banquetas/junco-fita/" title="Junco Fita">Junco Fita</a></li>
		<li class="page_item page-item-558"><a href="/produtos/moveis/banquetas/madeira-e-junco/" title="Madeira e Junco">Madeira e Junco</a></li>
	</ul>
</li>
	<li class="page_item page-item-565"><a href="/produtos/moveis/bases-e-mesas/" title="Bases e Mesas">Bases e Mesas</a>
	<ul class='children'>
		<li class="page_item page-item-587"><a href="/produtos/moveis/bases-e-mesas/bc2jfmm-bc2fbr/" title="BC2JFMM – BC2FBR">BC2JFMM – BC2FBR</a></li>
		<li class="page_item page-item-571"><a href="/produtos/moveis/bases-e-mesas/bdbt-bdabta-2/" title="BD/BT – BDA/BTA">BD/BT – BDA/BTA</a></li>
		<li class="page_item page-item-602"><a href="/produtos/moveis/bases-e-mesas/bdbt-bdabta/" title="BDBT – BDABTA">BDBT – BDABTA</a></li>
		<li class="page_item page-item-615"><a href="/produtos/moveis/bases-e-mesas/bi-bia-bia5-biaj/" title="BI – BIA – BIA5 – BIAJ">BI – BIA – BIA5 – BIAJ</a></li>
		<li class="page_item page-item-574"><a href="/produtos/moveis/bases-e-mesas/bianj-bian/" title="BIANJ BIAN">BIANJ BIAN</a></li>
		<li class="page_item page-item-568"><a href="/produtos/moveis/bases-e-mesas/blbg-blabga/" title="BL/BG – BLA/BGA">BL/BG – BLA/BGA</a></li>
		<li class="page_item page-item-583"><a href="/produtos/moveis/bases-e-mesas/bvbr-bvabra/" title="BV/BR – BVA/BRA">BV/BR – BVA/BRA</a></li>
	</ul>
</li>
	<li class="page_item page-item-661 haschildren"><a href="/produtos/moveis/cadeiras/" title="Cadeiras">Cadeiras</a>
	<ul class='children'>
		<li class="page_item page-item-665"><a href="/produtos/moveis/cadeiras/aluminio/" title="Alumínio">Alumínio</a></li>
		<li class="page_item page-item-669"><a href="/produtos/moveis/cadeiras/junco-e-junco-fita/" title="Junco e Junco Fita">Junco e Junco Fita</a></li>
		<li class="page_item page-item-674"><a href="/produtos/moveis/cadeiras/madeira-e-aluminio/" title="Madeira e Alumínio">Madeira e Alumínio</a></li>
	</ul>
</li>
	<li class="page_item page-item-421 haschildren"><a href="/produtos/moveis/conjuntos/" title="Conjuntos">Conjuntos</a>
	<ul class='children'>
		<li class="page_item page-item-430"><a href="/produtos/moveis/conjuntos/pojfbr-tv7-biajbr/" title="POJFBR + TV7 +  BIAJBR">POJFBR + TV7 +  BIAJBR</a></li>
		<li class="page_item page-item-433"><a href="/produtos/moveis/conjuntos/pojftb-nmv952/" title="POJFTB + NMV95(2)’">POJFTB + NMV95(2)’</a></li>
		<li class="page_item page-item-426"><a href="/produtos/moveis/conjuntos/pocpp-biajpp-tv7/" title="POCPP + BIAJPP TV7">POCPP + BIAJPP TV7</a></li>
		<li class="page_item page-item-428"><a href="/produtos/moveis/conjuntos/pojfbr-mianjbr/" title="POJFBR + MIANJBR">POJFBR + MIANJBR</a></li>
		<li class="page_item page-item-436"><a href="/produtos/moveis/conjuntos/pojfbr-mianf7/" title="POJFBR +MIANF7′">POJFBR +MIANF7′</a></li>
		<li class="page_item page-item-435"><a href="/produtos/moveis/conjuntos/pojftb-mnv95/" title="POJFTB + MNV95">POJFTB + MNV95</a></li>
	</ul>
</li>
	<li class="page_item page-item-642"><a href="/produtos/moveis/lancamentos/" title="Lançamentos">Lançamentos</a>
	<ul class='children'>
		<li class="page_item page-item-863"><a href="/produtos/moveis/lancamentos/ibiza/" title="IBIZA">IBIZA</a></li>
		<li class="page_item page-item-653"><a href="/produtos/moveis/lancamentos/junco-novo/" title="Junco Novo">Junco Novo</a></li>
		<li class="page_item page-item-645"><a href="/produtos/moveis/lancamentos/mesa-madri/" title="Mesa MADRI">Mesa MADRI</a></li>
	</ul>
</li>
	<li class="page_item page-item-464 haschildren"><a href="/produtos/moveis/poltronas/" title="Poltronas">Poltronas</a>
	<ul class='children'>
		<li class="page_item page-item-469"><a href="/produtos/moveis/poltronas/aluminio/" title="Aluminio">Aluminio</a></li>
		<li class="page_item page-item-480"><a href="/produtos/moveis/poltronas/junco-fita-e-club/" title="Junco Fita e Club">Junco Fita e Club</a></li>
		<li class="page_item page-item-475"><a href="/produtos/moveis/poltronas/madeira-e-junco/" title="Madeira e Junco">Madeira e Junco</a></li>
		<li class="page_item page-item-486"><a href="/produtos/moveis/poltronas/xadres/" title="Xadres">Xadres</a></li>
	</ul>
</li>
	<li class="page_item page-item-704"><a href="/produtos/moveis/tampos/" title="Tampos">Tampos</a></li>
</ul>
</li>
</ul>
</li>
<li class="page_item page-item-710"><a href="/catalogos/" title="Catálogos">Catálogos</a></li>
<li class="page_item page-item-49"><a href="/fotos/" title="Fotos">Fotos</a></li>
<li class="page_item page-item-844"><a href="/noticias/" title="Notícias">Notícias</a></li>
</ul>
</div>
</div>

Eu já tentei usar um hack baseado na jQuery, mas não resolveu.

Entrar

Arquivado

Menu suspenso em CSS não funciona no IE

Recommended Posts

glamours 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

glamours 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante