CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Ryan
Ryan

Reputation: 10121

Hover on Bootstrap Navbar using CSS, how to handle gap between dropdown menu?

I follow this link [1] to open my dropdown when mouse is over, basically I added

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

The work fine, but the problem is what if I want the dropdown menu to have some vertical gap between the menu item?

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 20px !important;
}

The issue is when the mouse is out of menu item, the dropdown will be closed manually. I guess this can only be done by JS with some delay?

Example: http://jsfiddle.net/2Smgv/5438/

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

Upvotes: 0

Views: 782

Answers (2)

Olim Saidov
Olim Saidov

Reputation: 2844

It's a bit hacky but it works. Add invisible block above .dropdown-menu block

.dropdown-menu:before {
    content: " ";
    display: block;
    position: absolute;
    height: 25px;
    top: -25px;
    left: 0;
    right: 0;
}

Here is demo

Upvotes: 1

Daniel Schmidt
Daniel Schmidt

Reputation: 11921

You can fix it without JS by adding a wrapper class around the submenu like this. In addition you have to remove the margin-top:20px

Upvotes: 0

Related Questions