Ir para conteúdo

POWERED BY:

Arquivado

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

F E L I C I T Y - SP

Bug no Menu

Por , em Desenvolvimento frontend

Recommended Posts

F E L I C I T Y - SP    0

F E L I C I T Y - SP
Postado

Boa tarde pessoal.

 

Tenho um menu 3 níveis, que está com um probleminha.

 

Quando tento acessar o 3º nível ele fecha tudo e tenho que acioná-lo duas vezes para ele aparecer.

 

Vejam em : http://sepej.org.br/menu_ana.html

 

Item com 3º nível: Serviços >> Serv 1 >>

 

Abaixo o código da página.

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Menu - Default functionality</title>
    
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
   
  <script type="text/javascript">
   $(function(){
   $("#menu a").mouseover(function(){
      var menu = $(this).parent().children('.submenu');
      var submenu =  $(this).parent().parent();
	  
       
      if(menu.length > 0 && menu.is(':hidden')){
         $("#menu a").removeClass('ativo');
         $(this).addClass('ativo');
         $('.submenu').slideUp();
         menu.slideDown();
      }
      if(!submenu.hasClass('submenu') && menu.length == 0){
         $("#menu a").removeClass('ativo');
         $(this).addClass('ativo');
 
         $('.submenu').slideUp();
      }
       
   });
});
    </script>
	
    <style type="text/css">
    *{
   margin:0;
   padding:0;
}
 
ul{
   list-style:none;
   
}
 
ul#menu{
   width:500px;
   margin:0 auto;
 
}
ul#menu li{
   float:left;
    position:relative;
	
 
}
ul#menu li a{
   display:block;
   float:left;
   padding:0 15px;
   height:25px;
   line-height:25px;
   text-decoration:none;
   color:#333;
   border:1px solid #ccc;
}
 
ul#menu li a:hover, ul#menu li a.ativo{
   background:#ccc;
 
 
}
ul#menu li a:hover{
   background:#ccc;
      color:#FF0000;
	  
	  
 
} 
ul#menu li ul{
   display:none;
   position:absolute;
   top:25px;
   left:0;
   width:460px;
   background:#ccc;
}
ul#menu li ul li ul{
  width: 100px;
}
ul#menu li ul li ul li, ul#menu li ul li ul li a{
  float: none;
}
 
/*
ul#menu li:hover ul{
   display:block;
}
*/
    </style>
    
</head>
<body>
 
      <ul id="menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">Serviços</a>
            <ul class="submenu">
               <li><a href="#">Serv 1</a>
				   <ul class="submenu">
				   <li><a href="#">Serv 1.1</a></li>
				   <li><a href="#">Serv 1.1</a></li>
				   </ul>
			   </li>
			   
               <li><a href="#">Serv 2</a></li>
               <li><a href="#">Serv 3</a></li>
            </ul>
          
         </li>
         <li><a href="#">Produtos</a>
            <ul class="submenu">
               <li><a href="#">Prod 1</a></li>
               <li><a href="#">Prod 2</a></li>
               <li><a href="#">Prod 2</a></li>
            </ul>
          
         </li>
         <li><a href="#">Cliente</a></li>
         <li><a href="#">Contato</a></li>
      </ul>
    
</body>
</html>

 

Agradeço muito quem puder me ajudar.

 

Abraço. ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

'AlonE~    0

'AlonE~
Postado

Olá,

 

Quando passo o mouse no terceiro nível no Serv1 eu preciso fazer duas vezes nesse seu menu. mas tirando isso não está com problema.

 

Até Mais!

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