JSFiddle - React, Tailwind, and code Playground

by Mansfield

HTML

<ul class="header-right">
    <li class="menu-item">
        <span class="sub-menu-header">Menu 1</span>
        <ul class="sub-menu">
            <li class="sub-menu-item">
                <a href="..">Settings</a>
            </li>
            <li class="sub-menu-item">
                <a href="..">Logout</a>
            </li>
        </ul>
    </li>
    <li class="menu-item">
        <span class="sub-menu-header">Menu 2</span>
         <ul class="sub-menu">
            <li class="sub-menu-item">
                <a href="..">Item1</a>
            </li>
            <li class="sub-menu-item">
                <a href="..">Item2</a>
            </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;
}