JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="parent">
    <li>---Select---</li>
</ul>
<ul class="option" >
    <li>this is a long option</li>
    <li>this is a even long option</li>
    <li>this is a very long option</li>
    <li>this is a very long option</li>
    <li>this is a very long option</li>
    <li>this is a very long option</li>
</ul>

CSS

select{ width: 100;  }
.option
{
    display:none;
    list-style:none;
    height:100px;
    overflow:scroll;
}
.parent,.option
{
    list-style:none;
    border:1px Solid #CCC;
    width:100px;
    padding:5px;
    margin:1px;
    cursor:pointer;
}
.parent li
{
}
.option li:hover
{
    background-color:#CCC;
    color:#555;
}

JavaScript

$('.parent').on("click",function(){
   $('.option').toggle();
});

$('.option li').on("click",function(){
    $('.option li').each(function(){
        $(this).css({'background-color':'white','color':'black'});
    });
    alert($(this).text());
    $(this).css({'background-color':'#CCC','color':'#555'});
 });