导航栏：显示子菜单后保持链接悬停

Question

我有一个带有子菜单的导航栏，子菜单有一个背景图像 .png，但是，我的导航栏上只有 3 个链接有这个子菜单，所以，我的问题是，当菜单链接处于悬停状态时，子菜单是 onmouseover ，导航链接失去悬停状态。如何在子菜单上使用自定义背景制作导航栏并保持此链接悬停，我试过了，但是，如果我只使用 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

它包含有关如何使用纯 css 创建基于无序列表的漂亮下拉菜单的分步说明。你应该可以用它解决你的问题。