JSFiddle - React, Tailwind, and code Playground

HTML

<ul style="width:170px;">

<li id="login_display" class="fucker">
<a href="#">
<img src="http://www.entendu.info/images/user_16.png" alt="Connexion" width="16" height="16">
Connexion
</a>
</li>

    </ul>
<div id="droite">
<div class="box_login" style="display: none; ">


    
        <div class="clear"></div>
        <div class="loginform">
            <form name="login" action="http://www.entendu.info/login" method="post">
                Nom d'utilisateur
                <input type="text" name="lusername" placeholder="Nom d'utilisateur" class="ui-widget-content ui-widget ui-state-default ui-corner-all ui-button-text-only">
                <div class="mdp1" style="display:inline;">
                    <img src="http://www.entendu.info/images/questionMark.png" style="margin-top:5px;">
                </div>
                Mot de passe <!--password!-->
                <div class="mdp1_1" style="display:none;">
                    <a href="http://www.entendu.info/password">Oublié?</a>
                </div>
                
                <script>
                    $('div.mdp1').click(function() {
                        $('div.mdp1_1').slideToggle('fast');
                    });

                </script>
                
                <input type="password" name="lpassword" placeholder="Mot de passe" class="ui-widget-content ui-widget ui-state-default ui-corner-all ui-button-text-only">
                <input type="checkbox" value="yes" name="remember" style="width:20px; border:0px; vertical-align: baseline">
                &nbsp;Rester connecté
              
                
                <br>

                

                <button style="font-size:1em;" type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">
                    Connexion
                </span></button>
        
                <a href="http://www.entendu.info/signup" style="...

CSS

#droite {
display: inline;
float: left;
margin-left: 10px;
margin-top: 0px;
}

#droite .box_login {
background-color: whiteSmoke;
border-radius: 8px;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-khtml-border-radius: 0px 0px 8px 8px;
margin-top: 0px;
margin-bottom: 18px !important;
padding: 2px 8px 0px 8px;
width: 146px;
height: auto;
display: none;
}

.clear {
clear: both;
display: block;
}

form {
display: block;
margin-top: 0em;
}

.loginform input {
border: 1px solid #ADADAD;
border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
color: #444;
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,sans-serif;
font-size: 13px;
margin-top: 4px;
padding: 3px;
width: 139px;
border-image: initial;
}
jquery-ui.css:291
.ui-corner-all {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

JavaScript

$('#login_display').hover(function() {
    clearTimeout($(this).data('mouseovertimer'));
    clearTimeout($('.box_login').data('mouseovertimer'));
    $('.box_login').slideDown('normal');
}, function() {
    var $this = $(this);
    $this.data('mouseovertimer', setTimeout(function(){
         $('.box_login').slideUp('normal');
    }, 100));
});

$('.box_login').hover(function() {
    clearTimeout($('#login_display').data('mouseovertimer'));
}, function(){
    var $this = $(this);
    $this.data('mouseovertimer', setTimeout(function(){
         $this.slideUp('normal');
    }, 100));
});