JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="btn-group"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="valueOfButton">Gatunummer</span>
	</a>

    <ul class="dropdown-menu">
        <li tabindex="">1</li>
        <li tabindex="">2</li>
        <li tabindex="-1">3</li>
        <li tabindex="-1">4</li>
        <li tabindex="-1">5</li>
        <li tabindex="-1">6</li>
        <li tabindex="-1">7</li>
        <li tabindex="-1">8</li>
        <li tabindex="-1">9</li>
        <li tabindex="-1">10</li>
        <li tabindex="-1">11</li>
        <li tabindex="-1">12</li>
        <li tabindex="-1">13</li>
        <li tabindex="-1">14</li>
        <li tabindex="-1">15</li>
        <li tabindex="-1">16</li>
        <li tabindex="-1">17</li>
        <li tabindex="-1">18</li>
        <li tabindex="-1">19</li>
    </ul>
</div>

CSS

.btn-group ul {
    list-style-type:none;
    max-height:200px;
    padding-top:10px;
    overflow:auto;
    text-align:center;
}
.btn-group ul li {
    height:24px;
    line-height:24px;
}

.dropdown-toggle {
    width: 200px;
    height: 30px;
    padding-top: 10px;
    border: 0;
    box-shadow: 0 0 0;
    font-weight: bold;
    font-size: 15px;
    border-radius: 0;
    background: #000;
    color: #fff;
}
.valueOfButton {
    display: block;
    font-size: 14px;
}
.btn-group.open .dropdown-toggle {
    background-color: #828282;
    box-shadow: 0 0 0 0;
}
.dropdown-menu{
  width:220px
}

JavaScript

$(function () {
var liOptions =  jQuery(".btn-group .dropdown-menu li");
//The function that is listing the the mouse
liOptions.mouseenter(function () {
    console.log('mousie')
    if (!suppressMouse) {
        console.log('inside mousie')
        liOptions.filter('.selected').removeClass('selected');
        jQuery(this).addClass('selected').focus();
    }
}).mousemove(function () {    
    console.log('mousie move ' + suppressMouse) 
    if (!suppressMouse) {
        console.log('mouse mouve');
        liOptions.filter('.selected').removeClass('selected');
        jQuery(this).addClass('selected').focus();
    }
    suppressMouse = false;
});
// if the li item is clicked display the value inside the button
liOptions.click(function () {
    //select the span where we want the place te value
    console.log(jQuery(this).parent().parent().parent());
   jQuery(this).parent().parent().parent().find('.valueOfButton')

    //get the html we want to place in the span and fill the div .valueOfButton
    .html(jQuery(this).text());

    //populate the hidden form input element
    jQuery(this).parent().parent().parent().find('input').val(jQuery(this).data('key'));

});

var suppressMouse = false;
//What to do when the keyboard is pressed
liOptions.keydown(function (e) {
    e.preventDefault();
    var selected = liOptions.filter(".selected")
                     .removeClass('selected');
    suppressMouse = true;
    if (e.keyCode == 38) { // up
        console.log('keyup pressed ' + selected.length);

        if (selected.prev().length == 0) {
            liOptions.last().addClass('selected').focus();
        } else {
            selected.prev().addClass('selected').focus();
        }
    } else if (e.keyCode == 40) { // down
        console.log('keydown ' + selected.next().length);
        if (selected.next().length == 0) {
            liOptions.first().addClass('selected').focus();
        } else {
            selected.next().addClass('selected').focus();
        }
...