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="btn dropdown-toggle" data-toggle="dropdown" href="#">
	    Size
        <span class="caret"></span>
        <span class="valueOfButton">All</span>
	</a>

    <ul class="dropdown-menu">
        <li tabindex="-1">1</li>
        <li tabindex="-1">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

ul {
    list-style-type:none;
    max-height:160px;
    padding-top:10px;
    overflow:auto;
    text-align:center;
}
ul li {
    height:24px;
    line-height:24px;
}
.selected {
    background:#ff0000;
    color:#fff;
}
.btn.dropdown-toggle {
    width: 135px;
    height: 60px;
    padding-top: 40px;
    border-radius: 0px;
    font-weight: bold;
    font-size: 20px;
}
.btn .caret {
    margin-top:8px;
}
.valueOfButton {
    display: block;
    font-size: 14px;
}

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) {
        liOptions.filter('.selected').removeClass('selected');
        jQuery(this).addClass('selected').focus();
    }
}).mousemove(function () {
    suppressMouse = false;
    liOptions.filter('.selected').removeClass('selected');
    jQuery(this).addClass('selected').focus();
});
// 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();
        }
    } else if (e.keyCode == 13) { 
        // enter - if we press enter display choise in button
        console.log('enter pressed');
       ...