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?
CodePudding user response:
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;
}
CodePudding user response:
The dropdown disappears because your CSS tells it to show only when you hover on .link which is your about/product link
Instead of this:
.dropdown > .link:hover .dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
Do this:
.dropdown:hover .dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
Thank you would fix it