falter falter - 1 year ago 172
CSS Question

How to make twitter bootstrap menu dropdown on hover rather than click

I'm using bootstrap for the first time and really liking it - but one thing I'd like to do is have my menu automatically drop down on hover over, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.

Answer Source

I created a pure on hover dropdown menu based on the latest (v2.0.2) bootstrap framework that has support for multiple submenus and thought i'd post it for future users:


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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download