0

I have set up a navbar with some dropdown menus in it (using class="dropdown-toggle" data-toggle="dropdown"), and it works fine.

The thing is it works onClick, while I would prefer if it worked onHover.

Is there any built-in way to do this?

I tried this 

.dropdown:hover .dropdown-menu
{
   display: block;
}

this works fine menu will open on mouse over, but problem is when we click on any menu item it will not close menu will be kept opened, menu should be closed after we click on any menu item.

Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
ankitd
  • 1,967
  • 3
  • 26
  • 44
  • possible dublicate [http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click](http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click) – user3599534 Jun 26 '14 at 11:13

1 Answers1

0

Answer from this question, maybe a possible duplicate

CSS:

.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;
}

Demo

OR

Simply use this plugin Bootstrap: Dropdown on Hover Plugin

Community
  • 1
  • 1
user3599534
  • 404
  • 1
  • 4
  • 16