Sub-menu do menu drop down some com o mouse em cima

Anne Somensi · Fevereiro 1, 2013

Olá, pessoal.

Sei que o problema já foi explorado, porém até agora não encontrei uma solução definitiva para o problema.

Outro usuário teve o mesmo problema. A única resposta da página parece ser a solução, porém não sei de que forma APLICAR essa solução.

A resposta do usuário André Campos foi a seguinte:

O efeito para mostrar o menu está duplicado, sendo que tem o :hover no CSS, e a mesma coisa no jQuery. É esperado que algo assim acontecesse.

Escolha por 1 caminho apenas.

PS.: no jQuery, pode resumir para "slideToggle".
PS.: use o .stop() para não "bugar" seu efeito.

Porém... como faço para usar apenas um caminho? Ou melhor, usar apenas o CSS?

Muito obrigada!

Diéssica · Fevereiro 1, 2013

Perceba o efeito hover duplicado:

Caminho 1 (jQuery)

$("#menu ul li").hover(function(){
[...]

Caminho 2 (CSS)

#menu ul li:hover > ul {
[...]

Utilize um ou outro para produzir o evento. E sobre o Toggle e o stop(), lê na API do jQuery, é simples.
:seta: http://api.jquery.com/slideToggle/
:seta: http://api.jquery.com/stop/

O código é igual também? Se não, mesmo que semelhante, poste aqui.

Anne Somensi · Fevereiro 1, 2013

Olá! Muito obrigada por responder.

Porém, não vejo onde o efeito possa estar duplicado no meu caso:

/*----- MBT Drop Down Menu ----*/
#mbtnavbar {
    background: #32cd32;
    width: 780px;
    color: #32cd32; 
        margin: 0px;
        padding: 0px;
        position: relative;
        border-top:0px solid #32cd32; 
        height:20px;
        left:-30px;
}
#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:0px solid #dcdcdc; 
        border-right:0px solid #dcdcdc; 
        height:30px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #000000; 
    display: block;
   font:normal 12px Verdana, sans-serif;
   margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
      
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #dcdcdc; 
    color: #000000; 
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
      
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 120px; 
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #dcdcdc; 
    width: 120px; 
    color: #000000; 
    display: block;
    font:normal 11px Verdana, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px; 
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
  
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #FFF; 
    color: #32cd32; 
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;

Por favor, me ajude. Realmente gostaria de entender, porque o sub-menu Drop Down some ao passar o mouse por cima.

André do Vale · Fevereiro 1, 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Teste</title>

<style>

* {

border: none;

padding: 0;

margin: 0;

list-style: none;

}

#mbtnavbar {

background: #32cd32;

width: 780px;

color: #32cd32;

margin: 0 auto;

height: 30px;

}

#mbtnav {

text-align: center;

}

#mbtnav > ul {

display: inline-block;

text-align: left;

}

#mbtnav > ul > li {

float: left;

height: 30px;

}

#mbtnav li a {

color: #000;

display: block;

font: normal 12px/30px Verdana, sans-serif;

padding: 0 12px;

text-decoration: none;

}

#mbtnav li:hover > a {

background: #dcdcdc;

}

#mbtnav li ul {

z-index: 1;

position: absolute;

display: none;

width: 140px;

}

#mbtnav li ul ul {

margin: -31px 0 0 140px;

}

#mbtnav li:hover > ul {

display: inline-block;

}

#mbtnav li li a {

background: #dcdcdc;

font: normal 11px/30px Verdana, sans-serif;

border-bottom: 1px dotted #333;

}

#mbtnav li li a:hover{

background: #FFF;

color: #32cd32;

}

</style>

</head>

<body>

<ul>