My navigation bar has submenus with background images in .png format. Only 3 links in my navbar have these submenus. The issue I am facing is that when the menu link is in a hover state and the submenu is being hovered over, the nav link loses its hover state. How can I create a navbar with a custom background on the submenu while keeping the link in a hover state? I tried achieving this using div elements, but it's proving to be difficult with unordered lists.
Note: Below my links, when hovered, an arrow pointing down appears
<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");
});