SCROLL - Dropdown menus - 2
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="bold">Scrollable Menu</h2>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Scrollable Menu <span class="caret"></span></button>
<ul class="dropdown-menu scroll-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS
ul.scroll-menu {
position: absolute;
/*display: inherit !important;*/
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-moz-overflow-scrolling: touch;
-ms-overflow-scrolling: touch;
-o-overflow-scrolling: touch;
overflow-scrolling: touch;
top: 0 !important;
left: 0 !important;
/*width: 100%;*/
height: auto;
max-height: 80px;
margin: 2.6em 0;
border-left: none;
border-right: none;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
-ms-border-radius: 0 !important;
-o-border-radius: 0 !important;
border-radius: 0 !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
ul.scroll-menu-2x {
max-height: 80px;
}
.container {
background-color: green;
}
}