Dropdown Menu On Hover Dissapears (using Bootstrap)

I made a navigation with the help of bootstrap. With css i made a submenu that appears on hover. Only when i want to click a title in the submenu, the submenu dissapears before i c

Solution 1:

This happens because you have your padding only going down 10px and then your submenu is below the gray. while your padding does not reach the end of the main menu and therefore when the hover comes off the .nav > li > a it is now hovering just .nav which doesn't keep the sub menu open.

Change padding in:

.nav > li > a

to:

.nav > li > a
{
    padding: 10px13px30px13px;
}

Working JSFiddle: http://jsfiddle.net/buw4wc1t/3/