<!-- 

forum question answer only 

https://www.sitepoint.com/community/t/dropdown-menu-stay-when-hovered-over-menu/452761/2
-->
<div class="navbar-content">

  <div class="drop">
    <a id="sports-link" href="#sports">Sports</a>

    <div class="sports-dropdown-menu">
      <div class="drop-inner">

        <p class="text-red_first font-semibold text-base">Our sports</p>
        <p class="text-red_first font-semibold text-base">Our sports</p>
        <p class="text-red_first font-semibold text-base">Our sports</p>
        <p class="text-red_first font-semibold text-base">Our sports</p>
      </div>
    </div>
  </div>

  <a href="#beliefs">Our beliefs</a>
  <a href="#economics">Economics</a>
  <a href="#FAQ">FAQ</a>
  <a href="#news">News</a>
  <a href="#join">Join now</a>

</div>

.navbar-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  background: #eee;
}
.sports-dropdown-menu {
  will-change: transform;
  position: absolute;
  top: 100%; /* can't be further away or hover is lost*/
  padding-top: 2rem; /* use padding to push away*/
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: ease-out 0.3s;
  transform: perspective(300px) rotateX(-90deg);
  transform-origin: 50% 0%;
}
.drop-inner {
  color: black;
  background-color: #f7fafa;
  white-space: nowrap;
  padding: 1rem;
  border: 1px solid #000;
}
.drop {
  padding: 1rem;
}
.drop:hover .sports-dropdown-menu {
  opacity: 1;
  pointer-events: initial;
  transform: perspective(300px) rotateX(0deg);
}

.sports-dropdown-menu p {
  margin: 0.5rem 0;
}