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

Put the padding on your list items instead of your ul or container. That way the dropdown overlaps your hover element and your browser never thinks that you hovered out of the element. See this:

#topnav li {
    display:inline-block;
    padding:10px 0;
    margin-right:30px;
    position: relative;
}

http://jsfiddle.net/jeffreyTang/q5cmqLrf/1/