Menu drop down

[pinoc 2]

Opa.

 

Fiz um menu drop down, o efeito drop down em si de deser a lista quando coloca o mouse na categoria eu fiz todo em css mesmo.

Mas tive um problema referente ao hover da categoria, pois quando coloca o mouse na categoria ele muda o background e desse a lista e quando eu colocava o mouse na lista a categoria perdia esse background então fiz um sisteminha simples em jquery.

 

Que segue abaixo. So que como é normal adivinha em qual navegador não ta funcionando?

No IECA não tem cristo que faça o background da categoria continuar enqnt a lista estiver ativa.

 

$(document).ready(function() {
       $("#menu ul li").hover(function() {
               $(this).children("a").addClass("ativo");
       }, function() {
               $(this).children("a").removeClass("ativo");
       });
});

[marcelo2605 10]

pinoc, passa o html e o css do menu

[pinoc 2]

pinoc, passa o html e o css do menu

 

HTML

 

<div id="menu">
<ul>
   	<li><a href="#">Home</a></li>
       	<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Sobre Sitratuh</a>
       	<ul>
           	<li><a href="#">Diretoria</a></li>
               	<div id="separa-sub"></div><!-- SEPARA-SUB -->
               <li><a href="#">História</a></li>
               	<div id="separa-sub"></div><!-- SEPARA-SUB -->
               <li><a href="#">Quem Representamos</a></li>
               	<div id="separa-sub"></div><!-- SEPARA-SUB -->
               <li><a href="#">Informe Sitratuh</a></li>
           </ul>
       </li>
       	<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Jurídico</a></li>
       	<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Convenções</a></li>
       	<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Futebol</a>
       	<ul>
           	<li><a href="#">Cadastro de Equipe</a></li>
               	<div id="separa-sub"></div><!-- SEPARA-SUB -->
               <li><a href="#">Cadastro de Atleta</a></li>
           </ul>        
       </li>
       	<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Eventos</a></li>
       	<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Convênios</a></li>
       	<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Curriculuns</a></li>
       	<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Acordo Coletivo</a></li>
		<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Salários em Vigor</a></li>
       	<div id="separa"></div><!-- SEPARA -->
       <li><a href="#">Contato</a></li>
   </ul>
</div><!-- MENU -->

 

CSS

 

#menu {widht: 1000px; height: 20px; clear: both; margin-top: 30px;}
#menu > ul {padding: 0; margin: 0;}
#menu > ul > li {position: relative; float: left; list-style: none;}
#menu > ul > #separa {width: 1px; height: 20px; border-left: 1px solid #212121; float: left; margin: 0}
#menu > ul > li > a {float: left; font-size: 14px; color: #000; text-decoration: none; padding: 2px 10px;}
#menu > ul > li > a:hover {color: #1e9b67; background: #d5d4d4;}
.ativo {background: #d5d4d4;}
#menu > ul > li > ul {display: none; position: absolute; width: 150px; margin-top: 20px; background: #d5d4d4; padding: 5px 10px; z-index: 9999;}
#menu > ul > li > ul > li {list-style: none; font-size: 13px; padding: 5px 0;}
#menu > ul > li > ul > #separa-sub {width: 150px; height: 1px; border-top: 1px solid #e1e1e1;}
#menu > ul > li > ul > li > a {font-size: 14px; color: #000; text-decoration: none;}
#menu > ul > li > ul > li > a:hover {color: #1e9b67;}
#menu li:hover ul { display: block;}

[marcelo2605 10]

Pinoc, testei no IE 9 e IE 8 e funciona como no Chrome

[pinoc 2]

Pinoc, testei no IE 9 e IE 8 e funciona como no Chrome

 

Estranho pra min não esta funcionando no IE9

[marcelo2605 10]

Limpou o cache?