JSFiddle - React, Tailwind, and code Playground

HTML

<div class="uiMenuContainer" id="e_9dec39e3_2337_4378_8010_af30e34da888">
    <ul class="uiMenu ui-widget-header">
        
        <li class="uiMenuNoHover">
            <span onclick="uiMenuClickAction(this)">View Submission</span>
        </li>
        <li>
            <span>Actions</span>
            <ul class="uiHidden">
                <li>
                    <span onclick="uiMenuClickAction(this)">Start Change Request</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Start Renewal Request</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Close Bound Submission</span>
                </li>
                <li class="uiMenuItemDisabled uiMenuNoHover">
                    <span>Create Binder</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Create Task</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Send E-mail</span>
                </li>
                <li>
                    <span onclick="uiMenuClickAction(this)">Add new Note</span>
                    
                    
                    <ul>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                        <li>test<ul>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                    </ul></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uiMenuNoHover uiMenuItemRight">
            <span...

CSS

body{
     font-family: Tahoma;
     font-size: 11px;   
}

.uiMenuContainer
{
      background-color: gray; 
}

.uiMenuContainer
{
    background-color: #15428b; 
}

.uiMenu
{
    padding: 0;
    margin: 0;
    font-size: 11px;
    border-bottom: 1px solid #15428b;
}

.uiMenu li
{
    float: left;
    position: relative;
    list-style-type: none;
    padding: 5px;
    line-height: 16px;
    height: 16px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    vertical-align: middle;
}

.uiMenuImage
{
    vertical-align: bottom;
    margin-right: 2px;
    float: left;
}

.uiMenuItemRight{
    float: right !important;   
}

.uiMenuItemSeperator
{
    background-image: url('Content/images/uiMenuItemSeperator.png');
    background-repeat: repeat-x;
    background-position: center;
    line-height: 1px !important;
    height: 1px !important;
}

.uiMenuItemDisabled
{
    color: #999;
    font-style: italic;
}

.uiMenuItemHeaderHover
{
    background-color: #fff;
    color: #000 !important;
    border-top: 1px solid #15428b !important;
    border-right: 1px solid #15428b !important;
    border-left: 1px solid #15428b !important;
    cursor: pointer;  
}

.uiMenuItemHover
{
    border: 1px solid #15428b !important;
    background-color: #ffb74c;
    cursor: pointer;  
}
   
.uiMenuFlyout {

    border-bottom: 1px solid #15428b;
    border-right: 1px solid #15428b;
    border-left: 1px solid #15428b;
    background-color: #fff;
    display: inline-block;
    position: absolute;
    z-index: 100;
    padding: 5px;
    visibility: hidden;
}

.uiMenuFlyout > ul 
{
    margin: 0;
    padding: 0;
}

.uiMenuFlyout li
{
    list-style-type: none;  
    padding: 2px 10px 2px 5px;
    line-height: 16px;
    height: 16px;
    border: 1px solid transparent;
    font-weight: normal;
}

.uiMenuFlyoutChild {
    border-top: 1px solid #15428b...

JavaScript

$(document).ready(function() {

    uiMenuInit('#test');

});



function uiMenuInit(id) {

    $('.uiMenu > li').each(function () {

        $(this).data('header', true);
        uiMenuCreateItem(this);
    });

    $('.uiMenu').append('<div style="clear: both;"></div>');
}

function uiMenuCreateItem(li) {

    $(li).hover(function () {
        uiMenuItemMouseEnter(li);
    }, function (e) {
        uiMenuItemMouseLeave(li);
    });

    var flyout = null;

    if (!$(li).hasClass('uiMenuItemDisabled')) flyout = uiMenuCreateFlyout(li);

    if (flyout) {
        $(flyout).hover(function (e) {
            uiMenuFlyoutMouseEnter(li, flyout);
        }, function (e) {
            uiMenuFlyoutMouseLeave(li, flyout);
        });
    }
}

function uiMenuFlyoutPosition(flyout, li) {
    var right = $(window).width() - ($(li).outerWidth() + $(li).position().left);

    $(flyout).css('left', 'auto');
    $(flyout).css('right', right);
}

function uiMenuCreateFlyout(li) {

    if ($(li).hasClass('uiMenuItemHeader') && $(li).hasClass('uiMenuItemRight')) {
        // if the menu is right aligned only allow first level flyout
        $(li).children('ul').children('li').children('ul').remove();
    }

    var html = $(li).find('ul').html();

    if (html) {

        $(li).find('ul').remove();

        var top = $(li).position().top + $(li).outerHeight();
        var left = $(li).position().left;
        var isFlyout = $(li).parent().parent().hasClass('uiMenuFlyout');
        var isFlyoutChild = $(li).parent().parent().hasClass('uiMenuFlyoutChild');

        if (isFlyout) {
            var container = $(li).parent().parent();
            left = container.position().left + container.outerWidth() - 1;
            if (isFlyoutChild) 
                top = $(li).offset().top - 6;
        }

        var flyoutHtml = '<span class="uiMenuFlyout" style="top: ' + top + 'px; left: ' + left + 'px;"><ul class="uiMenuChild">' + html + '</ul></span>';
        var flyout =...