Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;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;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
Carregando comentários...