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/

Answer 2

The problem is with your padding being at the nav level and you trying to make the drop down appear below it. Because you position your dropdown away from the parent li, you're no longer hovering over it when you move your mouse down. To fix, remove the padding from the nav and add it to the li.

remove padding from here:

#topnav{
   display:block;
   clear:both;
   width:500px;
   margin:0;
   padding:0;
   text-align:center;
}

add to here:

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

remove top from here:

#topnav ul li ul {
    display: none;
    position: absolute;
    text-align: left;
    background:#510000; 
}

fiddle: http://jsfiddle.net/zj8krh95/7/

Answer 3

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.

Answer 4

You can also give

#topnav ul li ul {
   padding-top:30px
} 

instead of:

#topnav ul li ul {
   top:30px
}