Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

tannusesquerdo

[Resolvido] :hover não funciona no IE

Por , em Desenvolvimento frontend

Recommended Posts

tannusesquerdo    0

tannusesquerdo
Postado 

<!-- Menu -->
<div id="menu">
<ul class="main">
<li class="withsub">
<a class="item" href="#">
<div class="arrow">Acessórios</div></a>
<div class="sub col-one">
<div class="col">
<ul>
<li>
<a href="http://www.trisport.com.br/secao/53881/Nadadeiras">Nadadeiras</a></li>
<li><a href="http://www.trisport.com.br/secao/53904/Palmar">Palmar</a></li>
<li><a href="http://www.trisport.com.br/secao/53879/Poliboias">Poliboias</a></li>
<li><a href="http://www.trisport.com.br/secao/53880/Pranchas">Pranchas</a></li>
<li><a href="http://www.trisport.com.br/secao/54179/Toucas">Toucas</a></li>
<li><a href="http://www.trisport.com.br/secao/54981/Diversos">Diversos</a></li>
</ul>
</div>
</div>
</li>
<li class="withsub">
<a class="item" href="#">
<div class="arrow">Bolsas & Mochilas</div></a>
<div class="sub col-one">
<div class="col">
<ul>
<li><a href="http://www.trisport.com.br/secao/53892/Bolsas">Bolsas</a></li>
<li><a href="http://www.trisport.com.br/secao/53884/Mochilas">Mochilas</a></li>
<li><a href="http://www.trisport.com.br/secao/832830/Pochetes">Pochetes</a></li>
<li><a href="http://www.trisport.com.br/secao/53883/Sacos-de-Tela">Sacos de Tela</a></li>
</ul>
</div>
</div>
</li>
<li class="withsub">
<a class="item" href="#">
<div class="arrow">Confecção</div></a>
<div class="sub col-one">
<div class="col">
<ul>
<li><a href="http://www.trisport.com.br/secao/53901/Agasalhos">Agasalhos</a></li>
<li><a href="http://www.trisport.com.br/secao/53978/Bones">Bonés</a></li>
<li><a href="http://www.trisport.com.br/secao/53900/Camisas">Camisas</a></li>
<li><a href="http://www.trisport.com.br/secao/53903/Maios">Maiôs</a></li>
<li><a href="http://www.trisport.com.br/secao/53902/Sungas">Sungas</a></li>
<li><a href="http://www.trisport.com.br/secao/829319/Macaquinhos">Macaquinhos</a></li>
<li><a href="http://www.trisport.com.br/secao/53979/Shorts-e-Bermudas">Shorts & Bermudas</a></li>
</ul>
</div>
</div>
</li>
<li class="withsub">
<a class="item" href="#">
<div class="arrow">Óculos de Natação</div></a>
<div class="sub col-one">
<div class="col">
<ul>
<li><a href="http://www.trisport.com.br/secao/54220/Competicao">Competição</a></li>
<li><a href="http://www.trisport.com.br/secao/54222/Treinamento">Treinamento</a></li>
<li><a href="http://www.trisport.com.br/secao/54221/Junior">Júnior</a></li>
<li><a href="http://www.trisport.com.br/secao/54233/Basica">Básica</a></li>
</ul>
</div>
</div>
</li>
<li class="withsub">
<a class="item" href="#">
<div class="arrow">Competição</div></a>
<div class="sub col-one">
<div class="col">
<ul>
<li><a href="http://www.trisport.com.br/secao/53886/Bermudas">Bermudas</a></li>
<li><a href="http://www.trisport.com.br/secao/53896/Macaquinhos">Macaquinhos</a></li>
<li><a href="http://www.trisport.com.br/secao/53887/Maios">Maiôs</a></li>
<li><a href="http://www.trisport.com.br/departamento/183648/Triathlon">Triathlon</a></li>
<li><a href="http://www.trisport.com.br/secao/54220/Competicao">Óculos de Competição</a></li>
</ul>
</div>
</div>
</li>
<li class="withsub">
<a class="item" href="#">
<div class="arrow">Academias e Clubes</div></a>
<div class="sub col-two">
<div class="col">
<ul>
<li><a href="http://www.trisport.com.br/secao/53905/Fitness">Fitness</a></li>
<li><a href="http://www.trisport.com.br/secao/53899/Pilates-e-Fisioterapia">Pilates e Fisioterapia</a></li>
<li><a href="http://www.trisport.com.br/secao/53897/Piscina">Piscina</a></li>
<li><a href="http://www.trisport.com.br/secao/53906/Hidroginastica">Hidroginástica</a></li>
<li><a href="http://www.trisport.com.br/secao/56715/Recreacao">Recreação</a></li></ul></div>
<div class="col">
<ul class="subcat">
<li class="heading">
<span>Relógios e Cronômetros</span>
</li>
<li><a href="http://www.trisport.com.br/secao/53888/Cronometro-de-Borda">Cronômetro de Borda</a></li>
<li><a href="http://www.trisport.com.br/secao/53890/Cronometros">Cronômetros</a></li>
<li><a href="http://www.trisport.com.br/secao/53889/Frequencimetros">Frequencímetros</a></li>
<li><a href="http://www.trisport.com.br/secao/53891/Relogios">Relogios</a></li>
</ul>
</div>
</div>
</li>
<li><a class="item" href="http://www.trisport.com.br/departamento/183648/Triathlon"><div>Triathlon</div></a>
</li>
<li><a class="item" href="http://www.trisport.com.br/departamento/185718/Diversos"><div>Diversos</div></a></li>
</li>
</ul>
</div>
<!-- End Menu -->

 

#menu {
min-width:100%;
background-color:#244386;
background-image:-moz-linear-gradient(#244386, #2c539e0 10%, #244386);
background-image:-webkit-gradient(linear, 0% 0%, 0% 10% 100%, from(#244386), to(#244386), to(#2c539e0));
background-image:-webkit-linear-gradient(#244386, #2c539e0 10%, #244386);
background-image:-o-linear-gradient(#244386, #2c539e0 10%, #244386)
}
.heading a, .heading span {
color:#00a0f0 !important
}

#menu {
clear:both;
position:relative;
width:100%;
height:38px;
z-index:999998;
top:180px;
}
#menu ul {
margin:0;
padding:0;
list-style:none;
}
#menu a {
font-size:12px;
line-height:1;
display:block;
}
#menu .main {
position:relative;
width:1267px;
margin:0 auto;
}
#menu .main li {
float:left;
}
#menu .main .item {
font-weight:bold;
color:#fff;
padding:13px;
}
#menu .main .arrow {
display:block;
padding-right:12px;
background: url(http://www.dotstore.com.br/trisport/imagens/ic-header-v11.png) right 0 no-repeat
}
#menu .main .especial {
float:left;
padding:5px;
}
#menu .sub {
display:none;
position:absolute;
top:38px;
left:0;
background:#fff;
border:1px solid #dedede;
z-index:-1;
word-wrap:break-word;
box-shadow:#ddd 0 2px 2px;
}
#menu .sub ul {
float:left
}
#menu .sub li {
clear:both;
width:166px;
padding:0 6px
}
#menu .sub a {
line-height:1.5;
color:#666;
padding:3px 6px
}
#menu .sub a:hover {
background-color:#eee
}
#menu .sub .subcat a:before {
padding-right:4px;
}
#menu .sub .subcat .heading a:before {
content:none
}
#menu .sub .subcat .heading span:after, #menu .sub .subcat .heading a:after {
margin-left:4px
}
#menu .sub .heading span, #menu .sub .heading a {
line-height:1;
font-size:13px;
font-weight:bold;
display:block;
padding:6px
}
#menu .sub .heading a:hover {
text-decoration:underline;
background:none
}
#menu .sub.col-one {
width:178px;
padding:6px 0
}
#menu .sub.col-two {
width:358px;
overflow:hidden
}
#menu .sub.col-two .col {
float:left;
width:178px;
padding-top:6px;
padding-bottom:506px;
margin-bottom:-500px
}
#menu .sub.col-two .col:first-child {
border-right:1px solid #eee
}
#menu .last .sub {
left:auto;
right:0
}
#menu li:hover {
z-index:1;
position:relative
}
#menu li:hover .item {
border:1px solid #dedede;
background-color:#fff;
padding:12px;
color:#444
}
#menu li:hover .arrow {
background-position:right -12px
}
#menu li.withsub:hover .item {
border-bottom:none;
padding-bottom:14px;
margin-bottom:-1px;
color:#444;
z-index:1
}
#menu li.withsub:hover .sub {
display:block
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

WilkerIceri    4

WilkerIceri
Postado

Tente colocar a tag <a> antes da <li>, ficando assim:

<a href="http://www.trisport.com.br/secao/53881/Nadadeiras"><li>Nadadeiras</li></a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tente colocar a tag <a> antes da <li>, ficando assim:

<a href="http://www.trisport.com.br/secao/53881/Nadadeiras"><li>Nadadeiras</li></a>

não faça isso. Isso é incorreto.

 

Em qual versão do ie você está testando @tannusesquerdo ?

você se refere ao hover no LI ou no A ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

tannusesquerdo    0

tannusesquerdo
Postado

Oi William,

 

Abri o link no IE e vi que ele abriu o documento em modo Quirks, você declarou o Doctype corretamente, ele é a primeira linha do seu código?

 

 

Realmente foi problema na declaração do DOCTYPE.

Como é uma plataforma pronta não tinha declarado o DOCTYPE.

Mais já solicitei essa inclusão.

 

Obrigado a todos que se empenharam a me ajudar.

Obrigado!

 

e Bom dia a todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito