JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div class="user-menu">
    <ul id="user-dropdown">
        <li class="user-name"><span>$username</span></li>
        <li><a href="$request.contextPath/profile/history" class="first">#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" class="last">#springMessage('usermenu.logout')</a></li>
    </ul>
</div>

CSS

body {background:#ccc;}
#user-dropdown {margin: 100px;}
#user-dropdown {overflow:hidden;list-style-type: none;padding:0;float:right;}
#user-dropdown.active {}
#user-dropdown li {display:none;}
#user-dropdown li a {background: #000;font-weight:bold;color:#fff;display:block;padding: 0 10px;height: 30px;line-height: 30px;}
#user-dropdown li a.first {border-radius:5px 0 0 0;}
#user-dropdown li a.last {border-radius: 0 0 5px 5px;}
#user-dropdown li a:hover {}
#user-dropdown li.user-name {overflow:hidden;display:block;}
#user-dropdown li.user-name span {display:block;float:right;color:#fff;font-weight:bold;background: #000;padding: 0 10px;height: 30px;line-height: 30px;border-radius:5px;cursor:pointer;}
#user-dropdown.active li.user-name span {border-radius:5px 5px 0 0;}
#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

$("#user-dropdown").click(function() {
        $(this).addClass('active').children('li').each(function(){
            $(this).is(':hidden') ? $(this).slideDown(200) : '';
        })
    });
    $("#user-dropdown").mouseleave(function() {
        if ($(this).is('.active')) {
            $(this).removeClass('active').children('li').each(function(){
                !$(this).is('.user-name') ? $(this).slideUp(200) : '';
            })
        }
    });