Faced a problem. Made a vertical menu with pop-up submenu when hovering. But when you move the mouse diagonally downwards, the following submenu naturally pops up. It is necessary that when the mouse moves exactly vertically, the menus open, but not diagonally, which would allow the user to hover the submenu with the mouse.

How can I do that?

  • one
    Everything related to the question should be in question. Links to some third-party sites (except sandboxes) are regarded as spam .... to demonstrate the desired effect, if you like, you can record a video with this menu, convert it to a gif animation and attach this image - Alexey Shimansky
  • To demonstrate the effect of a person need to go to the link and see. What does it have to do with spam. Make the link inactive, hidden as you like. - 15828
  • 3
    Everything related to the question should be in question - Alexey Shimansky

1 answer 1

Option 1

Use an invisible element (this may be an additional div or pseudo-element :before :after ). Position it so that it overlaps the menu at the desired angle. (I highlighted it in blue, but in fact it should not be visible) (basic diagram, you can have a vertical, horizontal menu) basic scheme, you can have a vertical, horizontal menu Even if he is invisible, he will block the underlying elements. Element can be rotated using CSS transform properties

Option 2

Temporary delay. Instead of immediately launching the opening menu, make a small timeout:

 var timerId = setTimeout(function() { /*Здесь код открытия меню*/ }, 500);

then when you hover over a submenu, you can cancel the scheduled action.

 clearTimeout(timerId);