[Resolvido] Como faz menu com submenu dentro de submenu?

[Samroa Machel Web Master 0]

Boa tarde para todos!

 

Estou com um código css de um menu com submenu! Mas quero que ao passar o mouse em cima do submenu abra outro submenu!

 

Então, não sei quais códigos usar pra abrir o segundo submenus dentro do outro!

 

Por favor, se puderem me ajudar, Postem aqui o código correto??

 

Desde já agradeço a todos!

 

Segue o código que eu usei:

 

*{margin:0; padding:0;}

body{
     font:10pt Verdana, Arial, Helvetica, sans-serif;
}

ul{ 
  list-style-type:none;
}

ul#menuh{
   width:868px;
margin:0 auto;
}

ul#menuh li{
   position:relative;
float:left;
height: 28px;
}

ul#menuh li a{
   display:block;
float:left;
padding:0 15px 27px;
height:20px;
line-height:28px;
/*	background:#ffff99; */
color:#808080;
text-decoration:none;
font-weight: bold;
}

ul#menuh li a:hover{
       background:#D7FFD7;
	color:#000080;
	font-weight: bold;
	height: 1px;
}

ul#menuh li ul{
       display:none;
	position:absolute;
	top:20px;
	left:0px;
	background-color: #BBFFBB;
	width: 200px;
}

ul#menuh li:hover ul,
ul#menuh li.hover ul{
       display:block;
}

ul#menuh li ul a{
       clear:both;
}

ul#menuh li ul li{
       float:none;
	clear:both;
}

ul#menuh li ul li a{float:none;}

#menuh li:hover ul ul, li.over ul ul { 
display:none;
position:absolute;
left:224px;
top: 0px;
width:200px;
}

#menuh li:hover ul, li li:hover ul, li.over ul, 
li li.over ul { 
display: block;
position: absolute;
width:200px;
margin-top: 8px;
} /* Aqui a magica */

 

Eu uso esse código em jQuery pra funcionar os submenus:

$(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();
     }

  });
});

 

Uso tbm essa biblioteca:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

 

E o código html é:

<ul id="menuh">
        <li><a href="#">Home</a></li>
        <li><a href="#">Serviços</a>
           <ul class="submenu">
              <li><a href="#">Serv 1</a></li>
              <li><a href="#">Serv 2</a></li>
              <li><a href="#">Serv 2</a></li>
           </ul>

        </li>
        <li><a href="#">Produtos</a>
           <ul class="submenu">
              <li><a href="#">Prod 2</a></li>
              <li><a href="#">Prod 2</a></li>
              <li><a href="#">Prod 2</a>
              		<ul class="submenu">
             		   <li><a href="#">Prod 3</a></li>
             		   <li><a href="#">Prod 3</a></li>
            		   <li><a href="#">Prod 3</a></li>
           		</ul>
              </li>
           </ul>

        </li>
        <li><a href="#">Cliente</a></li>
        <li><a href="#">Contato</a></li>
     </ul>    

 

Só que tem um tipo de bug, não sei como arrumar! Quando passa o nome na parte vázia do link buga e muda pro link ao lado direito! Isso é algum erro no código css, jQuery ou na fonte da biblioteca?

 

Desde já agradeço!

 

Att

[Guilherme Oderdenge 42]

Da mesma forma que você faz um submenu dentro de um menu, você vai fazer o submenu desse submenu.

 

A lógica é essa. E ao contrário do que pode parecer, é mais fácil do que você imagina.

 

Entre nós aqui, dê uma olhada neste link. Depois, baixe o código e dê uma estudada nele. É bem simples mesmo.

 

Abraço! :thumbsup:

[Samroa Machel Web Master 0]

Da mesma forma que você faz um submenu dentro de um menu, você vai fazer o submenu desse submenu.

 

A lógica é essa. E ao contrário do que pode parecer, é mais fácil do que você imagina.

 

Entre nós aqui, dê uma olhada neste link. Depois, baixe o código e dê uma estudada nele. É bem simples mesmo.

 

Abraço! :thumbsup:

 

Guilherme Oderdenge,

 

Consegui fazer o menu com sua dica! Obrigado!

 

Att