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;
    }
    
    #mainNavli {
      margin: 0;
      padding: 0;
    }
    
    #mainNav,
    #mainNavul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    #mainNavli>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;
    }
    
    #mainNavli.showMenu>ul {
      display: block
    }
    
    .login {
      border: 3px solid #08C;
      padding: 20px;
      margin: 0
    }

    <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formmethod><ulid='mainNav'><li> Hover here to login!
    
          <ul><li><divclass='login'><p>Login</p><inputtype='password'><button>
       Okay
       </button></div></li></ul></ul></form>

    https://jsfiddle.net/dzt87zbk/

Share