JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="sub-menu">
<li>This is option one.</li>
<li>This is a second option.</li>
<li>We'll need three.</li>
<li>And now these are out of view.</li>
<li>I'm the last option.</li>
</ul>
CSS
.sub-menu {
padding: 0;
border: 1px solid black;
max-height: 4.5em;
overflow-y: auto;
}
.sub-menu li {
font-size: 1em;
padding: .25em 1em;
line-height: 1em;
}
.sub-menu li:hover {
background: #f1f1f1;
}