JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div class="user-menu">
    <ul id="user-dropdown">
        <li class="user-name">$username</li>
        <li><a href="$request.contextPath/profile/history">#springMessage('usermenu.history')</a></li>
        <li><a href="$request.contextPath/profile/changePassword">#springMessage('usermenu.changePassword')</a></li>
        <li><a href="$request.contextPath/profile/changeQuestions">#springMessage('usermenu.changeQuestions')</a></li>
        <li><a href="$request.contextPath/logout">#springMessage('usermenu.logout')</a></li>
    </ul>
</div>

CSS

body {background:#000;}
#user-dropdown {margin:0 auto;overflow:hidden;list-style-type: none;padding:0;float:right;}
#user-dropdown li {display:none;}
#user-dropdown li a {font-weight:bold;color:#fff;display:block;padding: 0 10px;height: 30px;line-height: 30px;}
#user-dropdown li a:hover {}
#user-dropdown li.user-name {display:block;}
#user-dropdown li.user-name a {float:right;padding: 0 27px 0 7px;cursor:pointer;border-right:solid 3px transparent;}
#user-dropdown li.user-name a:hover {background-color:#000;color:#000;border-right:solid 3px #aaa;}
html* #user-dropdown li.user-name {width:150px;}

JavaScript

$("#usermenu-title-panel").click(function() {
        $("#usermenu-links-panel").toggle();
    });
    $("#usermenu-panel").mouseleave(function() {
        $("#usermenu-links-panel").hide();
    });