How to twitter bootstrap dropdown menu hover and disable on click - css

<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#" target="_blank">NewWindow</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Active Link</li>
<li>Link</li>
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="jumbotron">
<h1 class="page-header">Bootstrap 3.0.3<br>
<small>Navbar - Click Dropdown - Sub - Sub - Sub - Sub ...</small></h1>
</div>
<div class="container">
<div class="row">
<h1>You Like It ?</h1>
<br>
</div>
</div>
CSS code
.marginBottom-0 {
margin-bottom: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}


I see that you are missing the opening <nav> tag which should look something like this:
<nav class="navbar navbar-default">
Regarding the hover, you can do this by using purely CSS hover:
.nav li.dropdown:hover>ul.dropdown-menu {
display: block;
}
Please see the working snippet below:
.marginBottom-0 {
margin-bottom: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.nav li.dropdown:hover>ul.dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Active Link</li>
<li>Link</li>
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="jumbotron">
<h1 class="page-header">Bootstrap 3.0.3<br>
<small>Navbar - Click Dropdown - Sub - Sub - Sub - Sub ...</small></h1>
</div>
<div class="container">
<div class="row">
<h1>You Like It ?</h1>
<br>
</div>
</div>

Related

Twitter Boostrap - Align label horizontally to dropdown

I would like to have the label for the dropdown next to the dropdown menus.
Find below how my current example looks like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Order: </li>
<li role="presentation" class="dropdown">
Ticker<span class="caret"></span>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
Any suggestions how to align the label with the dropdown properly?
Thx in advance!

I'm not sure I understand correctly, but for alignment I would use a flexbox.
.nav-pills {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Order: </li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Ticker
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>

Just add the below css in your custom css file
.nav-pills>li:not(.dropdown) {
padding: 10px 12px;
}
.nav-pills>li:not(.dropdown) {
padding: 10px 12px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Order: </li>
<li role="presentation" class="dropdown">
Ticker<span class="caret"></span>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>

You can simply add padding like this :
/* Optional theme */
#import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
ul.nav > li:first-child {
padding:10px 5px;
}
<ul class="nav nav-pills" role="tablist">
<li role="presentation" >Order: </li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Ticker
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>

Use Flex to nav pills
.nav-pills{
display:flex;
align-items:center;
}
JS FIDDLE: https://jsfiddle.net/pradeep0594/qfwngj5x/1/ for your reference

I like Gerard's display: flex solution better, but just in case anyone prefers to maintain the original display property, here is an example using only line-height to vertically center both .nav-pills.
<style>
.nav-pills > li {
line-height: 40px;
}
.nav.nav-pills > li > a {
/* removes top & bottom padding */
padding: 0 15px;
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Order: </li>
<li role="presentation" class="dropdown">
Ticker<span class="caret"></span>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>

Scrollable dropdown menu with submenus in Bootstrap

I am trying to achieve scrollable dropdown menu with sub-menus. I used the css from this post to have sub-menus in bootstrap 3. The problem is that the sub-menu is hidden within the container or is visible with a horizontal scrollbar within the container.
Here is what I have http://www.bootply.com/1OsPZq7WJC
For reference, HTML:
<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 scrollable-menu" role="menu">
<li>Action</li>
<li class="dropdown-submenu">Submenu
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
<li>Action 4</li>
<li>Action 5</li>
<li>Action 7</li>
</ul>
</li>
<li>Action</li>
<li>Another action</li>
<li class="dropdown-submenu">Submenu
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
<li>Action 4</li>
<li>Action 5</li>
<li>Action 7</li>
</ul>
</li>
</ul>
</div>
And CSS:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: visible;
overflow-y: scroll;
}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

You can't force the page to adopt the height of the drop down menu unless you define a specific height. Here is the css you need to add for a full page height.
body{
height:100vw;
}
Fiddle.

: nth child selector class is not applied on my page I would like to apply on second

<ul class="nav">
<li class="dropdown opener">Moodle community
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle free support" href="https://moodle.org/support">Moodle free support</a></li>
<li class="divider"> </li>
<li class="dropdown-submenu">Moodl
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle Docs" href="http://docs.moodle.org">Moodle Docs</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"> </li>
<li><a title="Moodle.com" href="http://moodle.com/">Moodle.com</a></li>
<li class="dropdown opener langmenu">English (en)
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="English (en)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=en">English (en)</a></li>
<li><a title="عربي (ar)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=ar">عربي (ar)</a></li>
</ul>
</li>
</ul>
.navbar .nav > li:nth-of-type(2) a:hover{
background-color: #407a61 !important;
color:#fff !important;
}
Why my css is not working here i would like to change the hover background-color of the second element how can i apply it. Is any other way to do it.

Check Here Your Answer
You have to remove > operator from the CSS
Here is the Demo
HTML
<div class="navbar ">
<div class="nav">
<ul>
<li>First One</li>
<li>Second One</li>
<li>Three One</li>
<li>Four One</li>
</ul>
</div>
</div>
CSS
.navbar .nav li:nth-of-type(2):hover {
color:red;
}

How to make bootstrap 3 dropdown menu working for no JS user

I'm looking how to convert dropdown menu on bootstrap for no JS user.
I already see its possible in full CSS but I'm not very friendly with CSS ...
Any one can help me ?

There is a possibility.
Download this Bootstrap
Implement this code jsFiddle here
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
Project name
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
2-level Dropdown <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
<hr>
<ul class="nav nav-pills">
<li class="active">Regular link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li>
2-level Menu <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
</ul>
CSS
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}

Just in case of someone wants a short answer.
HTML
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
CSS
.dropdown:hover .dropdown-menu {
display: block;
}
You can try it here

In your css put:
.dropdown-menu {display:block;}
.open > .dropdown-menu {display:block !important;}
And your javascript:
$(".dropdown-menu").hide();

Scrollable Menu with Bootstrap - Menu expanding its container when it should not

I tried this method (their fiddle) to enable scrollable menu with Bootstrap, but with that approach, the scrollable menu expands its container -- fiddle -- the non-scrollable menu, correctly, does not do this.
How can I fix this? Suggestions on other approaches compatible with Bootstrap are appreciated too!
For reference, here is the HTML from the first method's fiddle:
<ul class="nav">
<li class="dropdown">
<a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
"font-weight: bold"></a>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 1 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<i class="icon-group"></i> <b>My Groups</b>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
User
</li>
<li>
Administrators
</li>
<li>
Some Other Group
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 2 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<i class="icon-user"></i> <b>My Roles</b>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
Core Users
</li>
<li>
Admin
</li>
<li>
Some Other Role
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu footer -->
</ul>
</div>
<ul class="dropdown-menu">
<li class="disabled">
<i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i>
</li>
</ul>
</li>
</ul>
And the CSS:
/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
position:relative;
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: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
}

Bootstrap 5 (update 2021)
The dropdown markup has changed for BS 5 as the data- attributes have changed to data-bs-. However, setting max-height still works to make the dropdown scrollable...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
https://codeply.com/p/shJzHGE84z
Bootstrap 4 (update 2018)
The dropdown markup has changed for BS 4 as the items have their own dropdown-item class. However, setting max-height still works to make the dropdown scrollable...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
Bootstrap scrollable dropdown
Alternative horizontal menu for Bootstrap 4 using flexbox
Bootstrap 3 (original answer)
I think you can simplify this by just adding the necessary CSS properties to your special scrollable menu class..
CSS:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
HTML
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Action</li>
..
<li>Action</li>
<li>Another action</li>
</ul>
Working example: https://codeply.com/p/ox7JC49vmT

You can use the built-in CSS class pre-scrollable in bootstrap 3 inside the span element of the dropdown and it works immediately without implementing custom css.
<ul class="dropdown-menu pre-scrollable">
<li>item 1 </li>
<li>item 2 </li>
</ul>

For CSS, I found that max height of 180 is better for mobile phones landscape 320 when showing browser chrome.
.scrollable-menu {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
Also, to add visible scrollbars, this CSS should do the trick:
.scrollable-menu::-webkit-scrollbar {
-webkit-appearance: none;
width: 4px;
}
.scrollable-menu::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: lightgray;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);
}
The changes are reflected here: https://www.bootply.com/BhkCKFEELL

Do everything in the inline of UL tag
<ul class="dropdown-menu scrollable-menu" role="menu" style="height: auto;max-height: 200px; overflow-x: hidden;">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Action</li>
..
<li>Action</li>
<li>Another action</li>
</ul>

I just fix this problem in my project-
CSS code
.scroll-menu{
min-width: 220px;
max-height: 90vh;
overflow: auto;
}
HTML code
<ul class="dropdown-menu scroll-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Action</li>
..
<li>Action</li>
<li>Another action</li>
</ul>

i hope this code is work well,try this.
add css file.
.scrollbar {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
HTML code:
<div class="col-sm-2 scrollable-menu" role="menu">
<div>
<ul>
<li><a class="active" href="#home">Tutorials</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>

Resources