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

Question

i have a navbar with submenus, the submenu have a background image .png, but, only 3 links have this submenu on my navbar, so, my problem is, when the menu link is hover state, and the submenu are onmouseover, the nav link lost the hover state. how to do a navbar with custom background on submenu and keep this link hover, i tried it but, i have sucess if i do it only with div, but with a unordered list is hard.

obs: below my links, when hovered have a arrow down

<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

Have a look at this tutorial: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

It contains a step by step explanation on how to create a nice dropdown-menu - based on unordered lists - with pure css. You should be able to solve your problem with it.

Answer 2

Looks like the div wraping the submenu isn't necessary.

Something like this may be more simple:

$('.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);
    });
});

not sure what your current css was, so I made some up just to see how it would work.

here's the fiddle: http://jsfiddle.net/filever10/8xu5m/