• support@answerspoint.com

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.



This is the pure on hover dropdown menu based on the latest Bootstrap framework that has support for multiple submenus.


	<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">
                            <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>
                        <li><a href="#">Dropdown Menu</a></li>
                        <li><a href="#">Dropdown Menu</a></li>
                <li class="dropdown"><a href="#">Menu</a></li>
                <li class="dropdown"><a href="#">Menu</a></li>



body {

.sidebar-nav {
  padding: 9px 0;

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;

.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 5 years ago
  • Community  wiki

Your Answer

    Facebook Share        
  • asked 5 years ago
  • viewed 1889 times
  • active 5 years ago

Best Rated Questions