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>
</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;
}
ol.secondary:after {

}
.wrapper:hover .secondary {
    display: block;
    counter-reset: item;
}

.wrapper:hover .secondary li:before {
  display: inline-block;
  content: "..." counter(item, decimal);
  counter-increment: item;
  width: 3em;
}

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