Question

I have a dropdown menu, the problem is that on the main menu is that when mousesing out of the mainmenu, to be dropdown menu, the hover effect on the parent element disappears.

I’ve tried doing something like this:

$("nav#main-nav ul li #submenu").hover(
  function () {
    //alert($(this).closest(["li", "a"]));
    $(this).closest(["li", "a"]).css('border-bottom', '8px solid #000');
  }
);

However, this doesn’t work 🙁
The menu looks like this:

<nav id="main-nav">
  <ul>
    <li>
      <span><a href="#" class="blue">Social & Sundhed</a></span>
    </li>
    <li>
      <span><a href="#" class="orange">Pædagogisk</a></span>
    </li>
    <li>
      <span><a href="#" class="green">Kost & Service</a></span>
    </li>
    <li>
      <span><a href="#" class="yellow">Teknik-Service</a></span>
      <ul id="submenu">
        <div class="inner">
          <div class="border-top"></div>
          <div class="submenu-left">
            <li><a href="#">Beredsskabspersonale i basis og mesterstillinger</a></li>
            <li><a href="#">Regionsbetjente Skolebetjente, Ejensomsserviceassister m.fl (DR)</a></li>
            <li><a href="#">Driftsledere HUR/Arriva (Danske regioner)</a></li>
            <li><a href="#">Miljøkontrollører ved Miljokontrollen (KBH)</a></li>
          </div>
          <div class="submenu-right">
            <li><a href="#">Beredsskabspersonale i basis og mesterstillinger</a></li>
            <li><a href="#">Regionsbetjente Skolebetjente, Ejensomsserviceassister m.fl (DR)</a></li>
            <li><a href="#">Driftsledere HUR/Arriva (Danske regioner)</a></li>
            <li><a href="#">Miljøkontrollører ved Miljokontrollen (KBH)</a></li>
          </div>
          <div class="clearfix"></div>
          <div class="border-bottom"></div>
        </div>
        <div class="clearfix"></div>
      </ul>
      <div class="clearfix"></div>
    </li>
  </ul>
</nav>

Answer 1

Do you got the hover on the LI A:hover or LI:hover a cus when you use the second, you can hover the submenu all you want, but the :hover of the A will stay active. This can be done by css.

#main-nav li:hover a
{
    // Hover of the A
}