JSFiddle - React, Tailwind, and code Playground

by timsalabim

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
    <ul class="ext-nav">
        <li id="login">
            <a  href="#" margin-right="40px">login</a>
 <form method="post" action="https://clients.citricdigital.com/dologin.php">
Email Address: <input type="text" name="username" size="50" /><br />
Password: <input type="password" name="password" size="20" autocomplete="off" /><br />
<input type="submit" value="Login" />
</form>
        </li>
    </ul>
</nav>

CSS

#login {
    list-style: none;
	height: 40px;
}

#login a {
    text-decoration: none;
    color: white;
    background-color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 10px 20px;
}

#login-form  {
    position: absolute;
    margin-top: 9px;
    display: none;
    float: left;
    clear: both;
    background-color: #666;
    padding: 0 2% 2% 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#login-form .text {
    width: 100%;
    float: right;
    margin-bottom: 2%;
}

#login-form .submit {
    float: right;
}

JavaScript

$("#login").hover(function() {
	$("#login-form").slideToggle();
});