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

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/