falter falter - 6 months ago 58
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

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:

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

Comments