JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="test">
    <li class="onabout">
        <a href="">Alpha</a>
        <ul>
            <li>Hiya! And it persists</li>
        </ul>
    </li>
    <li class="onabout">
        <a href="">Alpha</a>
        <ul>
            <li>Hiya! And it persists</li>
        </ul>
    </li>
</ul>

CSS

ul {
    display: block;
    width: 200px;
}
ul li {
    display: block;
}
ul li a {
    display: block; 
    border: 1px solid #000;
    background: #fff;
}
ul li a {
    display: block; 
    border: 1px solid #000;
    background: #fff;
    
}
ul li ul {
    display: none;
}
ul li ul.permahover {
    display: block;
}

JavaScript

$(".onabout").on("mouseover", function() {
  $('.permahover').removeClass('permahover');
  $(this).find("ul").addClass('permahover');
});