Como manter o menu pai pairou enquanto o mouse no menu filho em um menu suspenso

Estou tentando criar um menu suspenso. Está funcionando bem. Eu quero o menu superior quando flutuava em uma cor branca. quando se desloca para baixo para os submenus, o menu superior deve permanecer em cor branca. Mas o menu superior se transforma em sua cor original original.

Como manter o menu principal pairou enquanto movia o mouse nos submenus.

O código está aqui:

HTML

 

JS

 var timeout = 0; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close; 

CSS

 #jsddm { margin: 0; padding: 0; } #jsddm li { float: left; list-style: none; } #jsddm li a { display: block; padding: 5px 12px; padding-left:15px; padding-right:15px; text-decoration: none; border-right: 1px solid #DBDBDB; padding-bottom:6px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background-color:#FFF; color:#000; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border:#3895C0 1px solid; border-top:none; z-index:1001; margin-left:-2px; } #jsddm li ul li { float: none; display: inline; margin:0px; } #jsddm li ul li a { width: auto; background: #fff; color:#080CB2; font-weight:normal; font-size:11px; border-bottom:1px solid #CCC; text-decoration:none; width:180px; } #jsddm li ul li a:hover { text-decoration:underline; color:#080CB2; } 

O problema é devido ao estado “pairar” em CSS, então quando você deixa o elemento “a”, perderá o estado do deslocamento.

algumas modificações ao seu código devem fazer isso funcionar.

  function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible'); $(">a", $(this)).css("background-color", "#FFF"); } function jsddm_close() { if (ddmenuitem) { ddmenuitem.css('visibility', 'hidden'); $(ddmenuitem).prev().css("background-color", ""); } } 

NOTA: você também está faltando uma tag li final no código postado

Não vejo por que você precisa usar o JS aqui. Eu vi muitos exemplos de pessoas tentando fazer menus simples que simplesmente não tomaram o tempo para usar a estrutura HTML adequada e usar o CSS para manipular os elementos.

A menos que você realmente queira ter algum tipo de animação (ainda assim, você pode usar a transformação CSS3 para animar), então eu sugiro usar essa resposta que dei a outro usuário que teve um problema suspenso por algum tempo.

Menus suspensos CSS que pressionam o conteúdo da página

O link acima oferece um exemplo muito rápido e direto de uma solução suspensa HTML + CSS. Usando este exemplo, você pode conseguir o que procura, mantendo o link pai “selecionado” com apenas HTML e CSS.


Editar:

Para falar diretamente sobre o seu problema. Tudo o que você precisa fazer para corrigir o problema é configurar seu CSS um pouco diferente.

Mudança:

 #jsddm li a:hover { background-color:#FFF; color:#000; } 

Para:

 #jsddm li:hover a { background-color:#FFF; color:#000; } 

Como você pode ver, estou selecionando o elemento li para usar :hover pseudo seletor em vez de uma tag. Isso ocorre porque você envolve o submenu ul dentro desta tag. Então, tecnicamente, é o elemento pai.