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;
    margin-right: 1px; /* if cursor moves through elements from left to right, resets all to 0 - so don't have them adjoining each other */
}
ol.secondary li {
    display: none; /* Hide the lines, not the ol */
}
ol.secondary {        
  list-style-type: none; /* We need to replace the default numerals with one based on CSS content and counters, else they never show when lines are toggled, even in normal browsers */
  counter-reset: item; /* Counter reset on the ol. It's never hidden (but sometimes empty) so it'll work */
}

.wrapper:hover .secondary li {
    display: block; /* Toggle the lines' show state */
}

.wrapper:hover .secondary li:before {
  content: counter(item, decimal) "."; /* Re-invent ol lines AFTER the CSS has made the lines appear */
  counter-increment: item; /* Match namespace created above */
  width: 1.5em;
  display: inline-block; /* Necessary for nice spacing */
}

h4 {
    font-weight: bold;
    font-size: 1.2em;
}