JQuery: Keep Hovering Despite Browser Proposal From Input Element

I have a navigation given by an nested ul list like this

• Some Stuff!
  • Page 1
  • Page 2

    Solution 1:

    As a solution You can remove the class .showMenu if event.target is not input Also blur the input when the dropdown becomes hidden

    $('ul#mainNav > li').hover(function(e) {
        $(this).addClass("showMenu");
      },
      function(e) {
        if (!$(e.target).is('input')) {
          $(this).removeClass("showMenu");
          $('input').blur();
        }
      });

    #mainNav>li {
      border: 3px solid #08C;
      background-color: #FFF;
      display: inline-block;
    }
    
    #mainNav li {
      margin: 0;
      padding: 0;
    }
    
    #mainNav,
    #mainNav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    #mainNav li>ul {
      position: absolute;
      display: none;
      z-index: 1;
      min-width: 200px;
      padding: 0px;
      margin: 0px;
      text-align: left;
      background-color: #FFF;
      box-sizing: border-box;
    }
    
    #mainNav li.showMenu>ul {
      display: block
    }
    
    .login {
      border: 3px solid #08C;
      padding: 20px;
      margin: 0
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form method>
    
      <ul id='mainNav'>
        <li> Hover here to login!
    
          <ul>
            <li>
              <div class='login'>
                <p>Login</p>
                <input type='password'>
                <button>
       Okay
       </button>
              </div>
    
            </li>
          </ul>
      </ul>
    </form>

    https://jsfiddle.net/dzt87zbk/

    
    

Share