JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-static">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

        </button>	<a class="navbar-brand" href="#">Large Dropdown Menu</a>

    </div>
    <div class="collapse navbar-collapse js-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown dropdown-large">	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

                <ul class="dropdown-menu dropdown-menu-large row">
                    <li class="col-sm-3">
                        <ul>
                            <li class="dropdown-header">Glyphicons</li>
                            <li><a href="#">Available glyphs</a>

                            </li>
                            <li class="disabled"><a href="#">How to use</a>

                            </li>
                            <li><a href="#">Examples</a>

                            </li>
                            <li class="divider"></li>
                            <li class="dropdown-header">Dropdowns</li>
                            <li><a href="#">Example</a>

                            </li>
                            <li><a href="#">Aligninment options</a>

                            </li>
                            <li><a href="#">Headers</a>

                            </li>
                            <li><a href="#">Disabled menu items</a>

                            </li>
                        </ul>
                    </li>
                    <li class="col-sm-3">
                 ...

CSS

.dropdown-large {
    position: static !important;
}
.dropdown-menu-large {
    margin-left: 16px;
    margin-right: 16px;
    padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
    padding: 0;
    margin: 0;
}
.dropdown-menu-large > li > ul > li {
    list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover, .dropdown-menu-large > li ul > li > a:focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a, .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus {
    color: #999999;
}
.dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
    color: #428bca;
    font-size: 18px;
}
@media (max-width: 768px) {
    .dropdown-menu-large {
        margin-left: 0;
        margin-right: 0;
    }
    .dropdown-menu-large > li {
        margin-bottom: 30px;
    }
    .dropdown-menu-large > li:last-child {
        margin-bottom: 0;
    }
    .dropdown-menu-large .dropdown-header {
        padding: 3px 15px !important;
    }
}

JavaScript

$('.navbar-collapse').keyup(fazerScroll);

function fazerScroll(event) {
    if (!$('.navbar-collapse').is(':visible')) return;
    var navBar = document.querySelector('.navbar-collapse');
    var scrollAtual = navBar.scrollTop;

    var incremento = event.keyCode == 40 ? 100 : event.keyCode == 38 ? -100 : 0;
    if (!incremento) return;
    $(navBar).stop().animate({
        scrollTop: scrollAtual + incremento
    }, 500);
}