JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-menu-wrapper">
    <nav role="navigation" aria-label="Main menu">
        <ul class="main-menu clearfix" role="menubar">
            <li tabindex="1"><a href="" tabindex="-1">Main menu 1</a>

                <ul class="sub-menu clearfix">
                    <li><a href="#">Sub menu 1</a>
                    </li>
                    <li><a href="#">Sub menu 2</a>
                    </li>
                    <li><a href="#">Sub menu 3</a>
                    </li>
                    <li><a href="#">Sub menu 4</a>
                    </li>
                    <li><a href="#">Sub menu 5</a>
                    </li>
                    <li><a href="#">Sub menu 6</a>
                    </li>
                </ul>
            </li>
            <li tabindex="2"><a href="" tabindex="-1">Main menu 2</a>

                <ul class="sub-menu clearfix">
                    <li><a href="#">Sub menu 1</a>
                    </li>
                    <li><a href="#">Sub menu 2</a>
                    </li>
                    <li><a href="#">Sub menu 3</a>
                    </li>
                    <li><a href="#">Sub menu 4</a>
                    </li>
                    <li><a href="#">Sub menu 5</a>
                    </li>
                    <li><a href="#">Sub menu 6</a>
                    </li>
                </ul>
            </li>
            <li tabindex="3"><a href="" tabindex="-1">Main menu 3</a>

                <ul class="sub-menu clearfix">
                    <li><a href="#">Sub menu 1</a>
                    </li>
                    <li><a href="#">Sub menu 2</a>
                    </li>
                    <li><a href="#">Sub menu 3</a>
                    </li>
                    <li><a href="#">Sub menu 4</a>
                    </li>
                    <li><a href="#">Sub menu 5</a>
                    </li>
                    <li><a href="#">Sub menu 6</a>
                    </li>
                </ul>
           ...

CSS

.main-menu {
    width: 400px;
    height: 50px;
    line-height: 50px;
    list-style: none;
    margin: 0;
    float: right;
    font: 18px'Arial';
    position: relative;
}
.main-menu li {
    display: table-cell;
    border-right: 1px solid #0854a9;
    background: #000000;
}
.main-menu li a {
    line-height: 47px;
    border-top: 3px solid transparent;
    display: block;
    padding: 0 8px;
    color: #ffffff;
}
.main-menu li a:hover, .main-menu li a:focus, .main-menu li.dropped > a, .main-menu li:focus > a {
    color: #023e81;
    background: #ff0000;
    border-top: 3px solid #ffc226;
    text-decoration: none;
}
.main-menu li:hover ul, .main-menu li:focus ul {
    display: block;
}
.sub-menu {
    background: #000000;
    position: absolute;
    margin: 0;
    display: none;
    min-width: 148px;
    border-bottom: 3px solid #ffc226;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}
.sub-menu li {
    display: block;
    border: none;
}
.sub-menu li a {
    line-height: normal;
    border: none;
    display: block;
    padding: 8px;
    color: #023e81;
}
.sub-menu li a:hover, .sub-menu li a:focus {
    line-height: auto;
    border: none;
    color: #ffffff;
    background: #023f82;
}
.main-menu li a:focus + ul {
    display: block;
}

JavaScript

$('li[tabindex]').on('keypress', function() {
        $(this).find('a').click();
    });