Gap above submenu breaks menu in CSS-only use

[utrenkner]

The demo code features a gap between the main menu and the sub-menu. With CSS-only this makes it difficult to click on an entry in the sub-menu because the sub-menu disappears when moving the cursor over the gap.

[mrwweb]

@utrenkner This is pretty standard for CSS-only menus. Because the functional CSS provided here works out of the box and any gap between would be introduced by 3rd-party CSS, I'm tempted to think that CSS should also be required to provide the fix (usually with either padding on the menu item/submenu or a pseudo-element of either).

So this feels out of scope for the out-of-the-box implementation here. What do you think? Do you think it's possible to provide a generalized fix?

[mrwweb]

I've resolved this bug in the demo and am closing this issue as a result.

The demo css now includes an example fix for this issue for any sites that set the position of submenus in a way that means they don't overlap or are immediately adjacent with their parent item.

The general technique is to create a pseudo element of the submenu that covers the gap between the submenu and parent item. This extends the area covered by the submenu element so that the mouse is always hovering over the parent item or the submenu item when moving from one to the other:

.clicky-menu.no-js ul::before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: .25em;
    top: -.25em;
}