JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="menuelem"><span class="visibleelem">LogOff</span><span class="hover spacer">LogOff</span></div>
    <div class="menuelem"><span class="visibleelem">Help</span><span class="hover spacer">Help</span></div>
</div>

CSS

body{background-color:#ECE9D8;font-size:8pt;}
div{width:100%; padding:0px;border-bottom:solid 1px #BCBCBC;padding-bottom:3px;}
span{border:solid 1px transparent; padding:3px;}
.hover{border-bottom-color:#BCBCBC;
        border-right-color:#bcbcbc;
    border-top-color:#ffffff;
    border-left-color:#ffffff;
    cursor:arrow;
    font-weight:bold;
}
.menuelem {
    display:inline;
}
.menuelem .visibleelem {
    position:absolute;
    top:6px;
}
.spacer {
    visibility:hidden;
}

JavaScript

$(function() {
    $('span').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});