JSFiddle - React, Tailwind, and code Playground

HTML

Список без стилей
<ul>
    <li>no style</li>
    <li>no style</li>
    <li>no style</li>
</ul>
<input type='text' class='inp' placeholder='click here'/>
<ul class='withStyle'>
    <li>with style(hover)</li>
    <li>with style(hover)</li>
    <li>with style(hover)</li>
</ul>

CSS

.withStyle{
    padding:0;
    background:#555;
    color:#fff;
    display:none;
    width:300px;
    margin:0;
}
.inp{
    width:300px;
}
.inp:focus + .withStyle{
    display:block !important;
}
.inp:focus + .withStyle li:hover{
    background:#00f;
    cursor: pointer;
}