JSFiddle - React, Tailwind, and code Playground

by Mansfield

HTML

<ul class="header-right">
    <li>
        <ul class="user-menu">
            <li class="menu-item" tabindex=0 id="submenu_li">
                <span class="sub-menu-header" title="Menu">Long menu name Menu</span>
                <div class="dropdown"></div>
                <div class="user-sub-menu" id="user-sub-menu">
                    <ul class="submenu-list">
                        <li class="submenu-item">
                            <a id="a1" href="/Test">Link1</a>
                        </li>
                        <li class="submenu-item">
                            <a href="/Test2">Link2</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
</ul>

CSS

ul.header-right
{
    position: absolute;
    top: 7px;
    right: 10px;
    list-style-type: none;
    margin: 0;
}

ul.header-right li
{
    display: inline-block;
    padding-left: 2px;
    vertical-align: top;
}

li.menu-item
{
    padding: 2px 2px 2px 10px !important;
}

li.menu-item:hover
{
    background-color: #888888;
    cursor: pointer;
}

li.menu-item:focus #user-sub-menu
{
    display: block;
}

ul.user-sub-menu a, ul.user-sub-menu a:visited
{
    text-decoration: none;
    color: #232323;
}

div.user-sub-menu
{
    display: none;
    background-color: #FFFFFF;
    min-width: 125px;
    max-width: 300px;
    min-height: 50px;
    max-height: 400px;
    position: absolute;
    right: 22px;
    z-index: 1000;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #232323;
    font-size: 1em;
}

div.user-sub-menu ul
{
    display: block;
    margin: 0;
    padding: 0;
}

div.user-sub-menu li
{
    display: block;
    padding: 2px 2px 2px 2px;
    font-size: 1.15em;
    border: 1px solid #FFFFFF;
}

div.user-sub-menu li a, div.user-sub-menu li a:visited
{
    text-decoration: none;
    color: #232323;
}

div.user-sub-menu li:hover
{
    text-decoration: none;
    background-color: #CCFFCC;
    border: 1px solid #DDDDDD;
}