SCROLL - Dropdown menu - 1

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">	<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
				</a>  <a class="brand" style="font-size: 12px; font-weight: bold;" href="#">
                    <span>Scroll Menu Example</span></a>

            <div class="nav-collapse collapse navbar-responsive-collapse">
                <!-- Example of a single scrollable dropdown-menu navigation (notice the placement of the "scroll-menu" class) -->
                <ul class="nav">
                    <li class="dropdown"><a href="#" data-toggle="dropdown"><b
			class="icon-th-large icon-white"></b></a>

                        <ul class="dropdown-menu">
                            <!-- static non-scrollable menu header -->
                            <li class="disabled"><a href="#"><b>My
					Theme:</b></a>
                            </li>
                            <li>
                                <!-- Here we have our dropdown-menu wrapper so we don't mess with the layout of the outer dropdown-menu -->
                                <ul class="dropdown-menu scroll-menu">
                                    <li><a href="#"><i
							class="icon-asterisk"></i> Start</a>

                                    </li>
                                    <li><a href="#"><i
							class="icon-minus"></i> UI Lightness</a>

                                    </li>
                                    <li><a href="#"><i
							class="icon-minus"></i> UI...

CSS

ul.scroll-menu {
    position: relative;
    display: inherit !important; /* OR REMOVE THIS LINE TO CUSTOMIZE! */
    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: 500px;
    margin: 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: 230px;
}