JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post">

<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>

CSS

#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
}

JavaScript

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