Keeping dropdown menu active (visible) even after hover out

Question

My sub menu disappears immediately after I move my mouse pointer to scroll towards the sub menu. Feel like I have screwed my CSS somewhere. I could not figure out after seve

Answer 1

Here's a way to do it (it's more of a trick):

http://jsfiddle.net/zj8krh95/5/

#topnav ul li:hover {
    padding-bottom: 10px;
    margin-bottom: -10px; /* so that the menubar's height stays the same */
}
#topnav ul li:hover ul {
    margin-top: -10px; /* so that the menu opens at the right position */
}

Basically, on hover, i extend the menu item's height so that no mouseout is trigger when i move down to the menu.