JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<ul class="dropList">
                <li tabindex="1">Elemento 1</li>
                <li tabindex="1">Elemento 2</li>
                <li tabindex="1">Elemento 3</li>
                <li tabindex="1">Elemento 4</li>
                <li tabindex="1">El quinto elemento ;)</li>
            </ul>

CSS

.dropList{
  font-size: 14px;
  z-index: 5000;
  top: 0;
  left: 0;
  background: #ffffff;
}
.dropList li{
    color: black;
  display: block;
  padding: 11px 18px;
  cursor: pointer;
  border-bottom: solid 1px #bfbfbf;
}
.dropList li:last-child{
  border-bottom: none;
}
.activeItemDropdown{
  background: gray;
  color: #ffffff;
}
.dropList li:focus{
  background: $color1;
  color: #ffffff;
}

JavaScript

$('ul.dropList').on('focus', 'li', function() {
    $this = $(this);
    $this.addClass('activeItemDropdown').siblings().removeClass();
    $this.closest('ul.dropList').scrollTop($this.index() * $this.outerHeight());
}).on('keydown', 'li', function(e) {
    $this = $(this);
    if (e.keyCode == 40) {        
        $this.next().focus();
        return false;
    } else if (e.keyCode == 38) {        
        $this.prev().focus();
        return false;
    }
}).find('li').first().focus();

$('ul.dropList li').mouseover(function() {
  $('ul.dropList li').removeClass('activeItemDropdown');
  $(this).addClass('activeItemDropdown');
});