JSFiddle - React, Tailwind, and code Playground

HTML

<div id="user">
    Hello,
    Jason
    <span>►</span>
    <div>
        <a href="#">Change&nbsp;Password</a>
        <a href="#">Manage&nbsp;Security&nbsp;Questions</a>
    </div>
</div>

CSS

#user {
    position: absolute;
    top: 0px;
    padding: 2px;
    font-size: 12px;
    color: #999;
    background-color: #f1f1ee;
    cursor:pointer;
}

#user:hover {
    background-color: #e1dfd9;
}

#user span {
    color: Silver;
}

#user div {
    display: none;
    background-color: #f1f1ee;
    position: absolute;
    z-index: 999;
    border: solid 5px #e1dfd9;
}

JavaScript

$("#user")
    .hover(
        function() {
            $("span, #user").css("color", "#195d43");
            $("#user div").show();
        },
        function() {
            $("span, #user").css("color", "#999");
            $("#user div").hide();
        }
);