[Resolvido] Menu Dropdown com problemas no IE 7
Olá Amigos,
Como vão?
Estpu fazendo um projeto que faz um menu dropdown (com sub-niveis), mas quando eu entro em uma das páginas em que o menu é active o dorpdown não funciona no IE 7
Segue os códigos css e html
CSS:
#ja-cssmenu {
margin: 0; / all lists /
margin-top:12px;
height:35px;
padding: 0;
background:url(../images/menu.png);
}
#ja-cssmenu ul {
margin: 0; / all lists /
padding: 0;
}
#ja-cssmenu li {
float: left;
display: block;
padding: 0;
margin: 0;
background: none;
}
#ja-cssmenu li ul {
width: 200px;
position: absolute; / second-level lists /
z-index: 99;
left: -999em; / using left instead of display to hide menus because display: none isn't read by screen readers /
height: auto;
w\idth: 200px;
}
#ja-cssmenu li ul ul {
margin: -2em 0 0 15em; / third-and-above-level lists /
}
#ja-cssmenu li li {
padding: 0 0 0 0;
margin: 0;
width: 200px;
}
#ja-cssmenu ul a {
width: 14.8em;
w\idth: 10.8em;
}
#ja-cssmenu li:hover ul ul, #ja-cssmenu li:hover ul ul ul,
#ja-cssmenu li.sfhover ul ul, #ja-cssmenu li.havechildsfhover ul ul, #ja-cssmenu li.havechild-activesfhover ul ul, #ja-cssmenu li.activesfhover ul ul,
#ja-cssmenu li.sfhover ul ul ul, #ja-cssmenu li.havechildsfhover ul ul ul, #ja-cssmenu li.havechild-activesfhover ul ul ul, #ja-cssmenu li.activesfhover ul ul ul {
left: -999em;
}
/ This "unhides" the sub-menus (left: -999em is what hides them) /
#ja-cssmenu li:hover ul, #ja-cssmenu li li:hover ul, #ja-cssmenu li li li:hover ul,
#ja-cssmenu li.sfhover ul, #ja-cssmenu li.havechildsfhover ul, #ja-cssmenu li.havechild-activesfhover ul, #ja-cssmenu li.activesfhover ul,
#ja-cssmenu li li.sfhover ul, #ja-cssmenu li li.havesubchildsfhover ul, #ja-cssmenu li li.havesubchild-activesfhover ul, #ja-cssmenu li li.activesfhover ul,
#ja-cssmenu li li li.sfhover ul, #ja-cssmenu li li li.havesubchildsfhover ul, #ja-cssmenu li li li.havesubchild-activesfhover ul, #ja-cssmenu li li li.activesfhover ul {
left: auto;
}
/* STYLING THE MENU
-----------------------------------*/
/ 1st level /
#ja-cssmenu li a {
display: block;
text-decoration: none;
font-size: 14px;
color: #FFF;
padding: 9px 15px 10px 15px;
font-weight: bold;
}
#ja-cssmenu li a.first-item {
border-left: none;
}
#ja-cssmenu li a.last-item {
border-right: none;
}
#ja-cssmenu li a:hover,
#ja-cssmenu li a:active,
#ja-cssmenu li a:focus {
background: url(../images/menu_over.png);
color: #FFFFFF;
}
#ja-cssmenu li:hover a,
#ja-cssmenu li.sfhover a,
#ja-cssmenu li.havechildsfhover a,
#ja-cssmenu li.havechild.activesfhover a {
background: url(../images/menu_over.png);
color: #FFFFFF;
}
#ja-cssmenu li.active a {
background: url(../images/menu_over.png);
color: #FFFFFF;
}
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
color: #FFFFFF;
}
#ja-cssmenu li.havechild:hover a,
#ja-cssmenu li.havechildsfhover a,
#ja-cssmenu li.activesfhover a {
background: url(../images/menu_over.png);
}
/ 2nd level and above /
#ja-cssmenu li ul {
border: 1px solid #d2cbc1;
background:#b7ad9c;
}
#ja-cssmenu li ul ul {
border: 1px solid #d2cbc1;
}
#ja-cssmenu li ul li {
border-bottom: 1px solid #d2cbc1;
border-right: none;
background: none;
}
#ja-cssmenu li ul a {
border-right: none;
margin: 0;
padding: 7px 10px;
background: none !important;
text-transform: none;
font-weight: normal;
font-size: 14px;
white-space: nowrap;
color: #FFF !important;
width: 180px;
}
#ja-cssmenu li.havesubchild,
#ja-cssmenu li.havesubchild-active {
background: url(img/arrow-1.gif) no-repeat 95% 50%;
}
#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild.activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild.activesfhover {
background: #f5f5f5 !important;
color: #333 !important;
}
#ja-cssmenu ul li a.active {
background: none !important;
color: #FFF !important;
font-weight: bold !important;
}
#ja-cssmenu ul li a.active:hover,
#ja-cssmenu ul li a.active:active,
#ja-cssmenu ul li a.active:focus {
color: #FFFFFF !important;
}
html
<div id="ja-mainav">
<ul id="ja-cssmenu" class="clearfix">
<li class="active"><a href="./" class="menu-item0 active first-item" id="menu1" title="Página Inicial"><span class="menu-title" style="padding-left:11px;">Home</span></a></li>
<li class="havechild"><a href="#" title="Quem somos"><span class="separator">Quem Somos</span></a>
<ul>
<li ><a href="empresa.php" class="first-item" title="Empresa"><span class="menu-title">Empresa</span></a></li>
<li ><a href="show_room.php" title="Show Room"><span class="menu-title">Show Room</span></a></li>
<li ><a href="atendimento.php" class="last-item" title="Atendimento"><span class="menu-title">Atendimento</span></a></li>
</ul>
</li>
<li class="havechild"><a href="produtos/index.html" title="Produtos" target="_blank"><span class="separator">Produtos</span></a>
<ul>
<li><a href="produtos/cortinas/index.html" title="Cortinas & Persianas" target="_blank" class=" first-item" id="menu78"><span class="menu-title">Cortinas & Persianas</span></a></li>
<li><a href="produtos/molduras/index.html" title="Molduras" target="_blank"><span class="menu-title">Molduras</span></a></li>
<li><a href="produtos/papeis_parede/index.html" title="Papéis de Parede" target="_blank"><span class="menu-title">Papéis de Parede</span></a></li>
<li><a href="produtos/pisos/index.html" title="Pisos" target="_blank"><span class="menu-title">Pisos</span></a></li>
<li><a href="produtos/tapetes/index.html" title="Tapetes" target="_blank"><span class="menu-title">Tapetes</span></a></li>
<li><a href="produtos/toldos/index.html" title="Toldos" target="_blank" class=" last-item"><span class="menu-title">Toldos</span></a></li>
</ul>
</li>
<li class="menu-title"><a href="ambientes.php" class="menu-item3" title="Ambientes Persiana"><span class="menu-title">Ambientes Persiana</span></a></li>
<li class="menu-title"><a href="novidades.php" title="Novidades"><span class="menu-title">Novidades</span></a></li>
<li class="havechild"><a href="#" class="menu-item5" title="Parceiros"><span class="separator">Parceiros</span></a>
<ul>
<li ><a href="arquitetos.php" class="first-item" title="Arquitetos & Decoradores"><span class="menu-title">Arquitetos & Decoradores</span></a></li>
<li ><a href="construtoras.php" title="Construtoras"><span class="menu-title">Construtoras</span></a></li>
<li ><a href="fornecedores.php" class="last-item" title="Fornecedores"><span class="menu-title">Fornecedores</span></a></li>
</ul>
</li>
<li class="havechild"><a href="#" class="menu-item" title="Qualidade"><span class="menu-title">Qualidade</span></a>
<ul>
<li ><a href="compromisso.php" class="first-item" title="Compromisso"><span class="menu-title">Compromisso</span></a></li>
<li ><a href="equipe.php" title="Equipe"><span class="menu-title">Equipe</span></a></li>
<li ><a href="tranquilidade.php" class="last-item" title="Tranquilidade"><span class="menu-title">Tranquilidade</span></a></li>
</ul>
</li>
<li class="menu-title"><a href="midia.php" title="Imprensa"><span class="menu-title">Mídia</span></a></li>
<li class="havechild"><a href="#" title="Contato"><span class="menu-title" style="padding-right:11px;">Contato</span></a>
<ul>
<li ><a href="contato.php" class="first-item" title="Contato"><span class="menu-title">Contato</span></a></li>
<li ><a href="localizacao.php" class="last-item" title="Localização"><span class="menu-title">Localização</span></a></li>
</ul>
</li>
</ul>
</div>
Desde já muito obrigado!
Discussão (5)
Carregando comentários...