JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menubar">
    <ul>
        <li><span class="access_key">F</span>ile</li>
        <li><span class="access_key">E</span>dit</li>
        <li><span class="access_key">H</span>elp</li>
    </ul>
</div>

CSS

body {
    margin: 0;
}

div#menubar {
    width: 100%;
    background-color: menu;
    float: left;
}
    div#menubar ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font: menu;
        cursor: default
    }
        div#menubar ul li {
            float: left;
            margin: 2px;
            padding: 5px 7px;
        }
            div#menubar ul li:hover {
                background-color: #3399ff;
                color: #fff
            }
            div#menubar ul li span.access_key.live {
                text-decoration: underline;
            }

JavaScript

$(document).ready(function() {
    $(this).keydown(function(e) {
        if(e.keyCode == 18) { alt_shifter = true; $('.access_key').css({ textDecoration: 'underline' }); }
    });
    
    $(this).keyup(function(e) {
        if(e.keyCode == 18) { alt_shifter = false; $('.access_key').css({ textDecoration: 'none' }); }
    });
});