How to I prevent dropdown menu from closing when moving cursor away from parent element?

Question

What's a good solution in this case if I want to prevent dropdown menu from closing as mouse moves away from parent to dropdown menu. Dropdown menu should be further away from parent li element but should not close when I want to access dropdown menu. If cursor is moved away from nav completely then dropdown should close.

My html

<nav> 
  <ul class="primary-menu">
  <li>item
  <ul class="sub-menu">
  <li>item 6</li>
  <li>item 7</li>
  </ul>
  </li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  </ul>
</nav>

My SCSS

nav {
  .primary-menu {
    display: flex;
    gap: 24px;
    position: relative;

    li {
      color: black;

      .sub-menu {
        position: absolute;
        display: none;
        background: red;
        border-radius: 4px;
        padding: 12px 24px;
        top: calc(100% + 24px);

        &:before {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 12px 12px 12px;
          border-color: transparent transparent red transparent;
          top: -12px;
        }

        li {
          padding: 8px 12px;
        }
      }

      &:hover {
        .sub-menu {
          display: block;
        }
      }
    }
  }
}

Example

https://jsfiddle.net/xs9wzr5h/2/

I've tried to push dropdown menu away with border-top: solid 24px transparent; but with this solution border-radius disappears from top corners. With this solution I tried to create fake padding so cursor will be always on parent/dropdown element which prevents dropdown from closing as cursor is moved from one element to another.

I also tried to use outline but this doesn't push element away from parent and can't be hovered.

I hope that my explanation was understandable. Cheers!

Answer 1

I managed to fix this with adding an after element to sub-menu

&:after {
                position: absolute;
                content: "";
                width: 100%;
                height: 26px;
                top: -26px;
                left: 0;
            }

This will add a "fake padding" rectangle to top of div which on hover will keep sub-menu open.