[FIXED] How can I make my dropdown menus stay visible on hover?

Issue

I'm not sure why, but my dropdown menus refuse to stay on the screen when hovering over them. They work fine when I make them clickable with :focus in the CSS with this:

.dropdown > .link:focus + .dropdown-menu

But, I want them to work on hover. But when I set it to the following, the dropdown disappears as soon as you take the mouse off the menu header:

.dropdown > .link:hover + .dropdown-menu

Here is the code on JSFiddle ---> https://jsfiddle.net/L8u96pbr/

What can I change to make it work?

Solution

Your dropdown disappears because as you move your cursor from the class link to the next sibling with class dropdown-menu, it un-hovers the link, causing the dropdown to disappear. To fix this, you can add padding to link, and if you would like it to take up the same amount of space you can add a negative margin of equal value to the padding (e.g. add .link { padding: 10px; margin: -10px; }).

Moreover, your selector .dropdown > .link:hover + .dropdown-menu only affects the class dropdown-menu when class link is hovered. You want this same effect to persist as class dropdown-menu is hovered, so add .dropdown-menu:hover as well.

.dropdown > .link:hover + .dropdown-menu,
.dropdown-menu:hover {
    opacity: 1; 
    transform: translateY(0px);
    pointer-events: auto;
}

Answered By - George Sun

Answer Checked By - Timothy Miller (PHPFixing Admin)