How to Create Bootstrap menu dropdown on hover not on click.
I Create a Bootstrap dropdown menu that's working on click the menu title, I want to Bootstrap menu automatically dropdown on hover, But I have no idea.
Bootstrap
drop-down-menu
twitter-bootstrap
- asked 6 years ago
- B Butts
1Answer
This is the pure on hover dropdown menu based on the latest Bootstrap framework that has support for multiple submenus.
HTML CODE:-
<body>
<section>
<div class="container">
<div class="row">
<ul class="nav nav-pills">
<li class="active"><a href="#">Active Menu</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown Menu <b class="caret"></b></a>
<ul class="dropdown-menu" id="menu1">
<li>
<a href="#">Sub Dropdown Menu <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">My Menu 1</a></li>
<li><a href="#">My Menu 2</a></li>
<li><a href="#">My Menu 3</a></li>
<li class="divider"></li>
<li class="nav-header">Menu Header</li>
<li><a href="#">My Menu 1</a></li>
<li><a href="#">My Menu 2</a></li>
</ul>
</li>
<li><a href="#">Dropdown Menu</a></li>
<li><a href="#">Dropdown Menu</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Menu</a></li>
<li class="dropdown"><a href="#">Menu</a></li>
</ul>
</div>
</div>
</section>
CSS CODE:-
body {
padding:100px;
}
.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;
}
- answered 6 years ago
- Community wiki
Your Answer