There is such a drop-down menu that needs to be implemented using "triangle-pointers". These pointers are made using the :before and :after pseudo-elements, which are applied to each sub-menu block (a total of 3 sub-menu blocks).

There is the following problem:

  1. I hover the mouse on the "catalog".
  2. The 1st level submenu falls out ("bedroom furniture", etc. - see picture).
  3. To go to this submenu with a mouse, I need to move it through the pointer-triangle.
  4. if you move the cursor not through the pointer, but through the space between the "directory" and the submenu, then the submenu disappears.

Is there a solution to the problem in which by hovering the cursor on the "product catalog" and moving the mouse down not through a triangular pointer, the submenu does not disappear?

dropdown menu

    2 answers 2

    Here the only correct option is to delay the disappearance. No overlap should be. You can also be bent and, as on Amazon, calculate a triangular area in which the concealment does not occur, but this is clearly not an option in this case. :)

    • The question does not have the label js;) - Qwertiy ♦

    There is. Here are a few options:

    1. Show a wrapped item that relates to the previous menu - while hover will be saved.

    2. Use an extinction delay (for example, through animation). There may be a problem that animations do not work with the display property.

    3. Use another pseudo-element to cover the area between the two menus with a transparent layer to save hover.

    • Thank you for your reply. If you use another pseudo-element, then why do you need to fasten it? After all, more than one before pseudo-element cannot be attached to a sub-menu. I tried to connect to the "Directory" link, but the pseudo-element didn't even appear. - evgeniyL
    • @evgeniyL, can you see an example on jsfiddle or snippet in question? - Qwertiy ♦
    • one
      I solved the problem, thanks to the second item from your list (with visibility and opacity) and thanks to a friend above :). Still, it is sometimes better not to create additional difficulties for yourself out of the blue. Thank. - evgeniyL