JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
<div class="wrapper"><h4>One</h4>
    <ol class="secondary">
        <li>One</li><li>Two</li><li>Three</li><li>Four</li>
    </ol>
</div>
<div class="wrapper"><h4>Two</h4>
    <ol class="secondary">
        <li>One</li><li>Two</li><li>Three</li><li>Four</li>
    </ol>
</div>
<div class="wrapper"><h4>Three</h4>
    <ol class="secondary">
        <li>One</li><li>Two</li><li>Three</li><li>Four</li>
    </ol>
</div>
<div class="wrapper"><h4>Four</h4>
    <ol class="secondary">
        <li>One</li><li>Two</li><li>Three</li><li>Four</li>
    </ol>
</div>


</div>

CSS

.wrapper {
    border: 1px solid #dddddd;
    padding: 6px 22px 8px 26px;
    float: left;
}
ol.secondary {
    display: none;
    list-style: decimal;
}
.wrapper:hover .secondary {
    display: block;
}
h4 {
    font-weight: bold;
    font-size: 1.2em;
}