navbar：保持链接悬停后显示子菜单

Question

我有一个导航栏与子菜单，子菜单有一个背景图像.png，但只有3个链接有这个子菜单在我的导航栏，所以，我的问题是，当菜单链接悬停状态，并且子菜单在鼠标悬停状态，导航链接失去悬停状态。如何做一个自定义背景的子菜单上的导航栏，并保持这个链接悬停，我试过了，但是，我已经成功，如果我只用div做，但无序列表很难。

OBS：我下面的链接，当徘徊有一个向下的箭头

<ul class="menu"> 
    <li><a href="#" id="empresa" class="">empresa</a> 
     <div class="sub-empresa"> 
      <ul class="menu-empresa"> 
       <li><a href="historia.html">história</a></li> 
       <li class="separador"></li> 
       <li><a href="politica-privacidade.html">política de privacidade</a></li> 
       <li class="separador"></li> 
       <li><a href="#">certificações e prêmios</a></li> 
      </ul> 
     </div> 
    </li> 
    <li class="pipe"></li> 
    <li><a href="produtos.html">produtos</a></li> 
    <li class="pipe"></li> 
    <li><a href="representantes.html">representantes</a></li> 
    <li class="pipe"></li> 
    <li><a href="distribuidores.html">distribuidores</a></li> 
    <li class="pipe"></li> 
    <li><a href="#" id="infotec">informativos tecnicos</a> 
     <div class="sub-informativo-tec"> 
      <ul class="menu-infotec"> 
       <li><a href="#">generalidades</a></li> 
       <li class="separador"></li> 
       <li><a href="#">recomendações para instalações</a></li> 
       <li class="separador"></li> 
       <li><a href="#">conceitos básicos sobre condutores</a></li> 
       <li class="separador"></li> 
       <li><a href="#">simbologia</a></li> 
       <li class="separador"></li> 
       <li><a href="#">critério de dimensionamento de circuitos</a></li> 
       <li class="separador"></li> 
       <li><a href="#">queda de tensão</a></li> 
       <li class="separador"></li> 
       <li><a href="#">dimencionamento de eletrodutos</a></li> 
       <li class="separador"></li> 
       <li><a href="#">correntes máximas de curto-circuito</a></li> 
      </ul> 
     </div> 
    </li> 
    <li class="pipe"></li> 
    <li><a href="#">eventos</a></li> 
    <li class="pipe"></li> 
    <li><a href="#">videos</a></li> 
    <li class="pipe"></li> 
    <li><a href="#" id="contato">fale conosco</a> 
     <div class="sub-fale-conosco"> 
      <ul class="menu-faleconosco"> 
       <li><a href="fale-conosco.html">fale conosco</a></li> 
       <li class="separador"></li> 
       <li><a href="trabalhe-conosco.html">trabalhe conosco</a></li> 
       <li class="separador"></li> 
       <li><a href="#">seja nosso representante</a></li> 
       <li class="separador"></li> 
       <li><a href="#">seja nosso distribuidor</a></li> 
      </ul> 
     </div> 
    </li> 
</ul><!-- /.menu --> 


//menu do topo 
$("#empresa").mouseover(function() { 
    $(".sub-empresa").slideDown(199); 
}); 

$(".sub-empresa").mouseleave(function() { 
    $(".sub-empresa").fadeOut("slow", function() { 
     $(".sub-empresa").css("display","none"); 
    }); 
}); 

$("#infotec").mouseover(function() { 
     $(".sub-informativo-tec").slideDown(199); 
}); 
$(".sub-informativo-tec").mouseleave(function() { 
     $(".sub-informativo-tec").fadeOut("slow", function() { 
     $(".sub-informativo-tec").css("display", "none"); 
    }); 
}); 

$("#contato").mouseover(function() { 
    $(".sub-fale-conosco").slideDown(199); 
}); 
$(".sub-fale-conosco").mouseleave(function() { 
     $(".sub-fale-conosco").fadeOut("slow", function() { 
     $(".sub-fale-conosco").css("display", "none"); 
    }); 
}); 

$("body").click(function(){ 
    $(".sub-empresa, .sub-informativo-tec, .sub-fale-conosco").fadeOut("slow"); 
}); 

Answer 1

看起来像div包装子菜单是没有必要的。

像这样的东西可能更简单：

$('.menu ul').each(function() { 
    $(this).parent().eq(0).hover(function() { 
     $(this).addClass('on');//for styling 
     $('ul:eq(0)', this).slideDown(200); 
    }, function() { 
     $(this).removeClass('on');//for styling 
     $('ul:eq(0)', this).stop(true, true).slideUp(400); 
    }); 
}); 

不知道你当前的CSS中，所以我做了一些只是为了看看它是如何工作的。

这里的小提琴：http://jsfiddle.net/filever10/8xu5m/

Answer 2

看一看这个教程： http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

，其中包括如何创建一个漂亮的下拉一步步解释-menu - 基于无序列表 - 使用纯CSS。你应该能够解决你的问题。