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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.