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

Question

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

Answer 1

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

Answer 2

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