JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Sorry if this code is **super messy**. I am not great at any kind of website design and I didn't want to polish up a broken feature. -->

  <header>
    <div class="head-dir-container">
            <nav class="head-dir">
            <ul>
              <li class="head-dir-has-submenu" id="headDirAbout">
                <a href="https://mindaman.com/about" class="head-dir-title"><img src="https://cdn.jsdelivr.net/gh/MindaManOfficial/mindamanofficial.github.io@main/about.png"> About<img src="https://cdn.jsdelivr.net/gh/MindaManOfficial/mindamanofficial.github.io@main/dir-arrow.png" id="headDirAboutArrow"></a>
                <div class="head-dir-submenu-container">
                  <div class="head-dir-submenu">
                    <div class="head-dir-col-3">

                      <div class="head-dir-submenu-column" id="headAboutMega">
                        <h1>All About Me (header)</h1>
                        <ul>
                          <li>
                            <a href="https://mindaman.com/about">About Me</a>
                            <a href="https://mindaman.com/timeline">Timeline</a>
                            <a href="https://mindaman.com/pronunciation">Pronunciation</a>
                            <a href="https://mindaman.com/faq">Frequently Asked Questions</a>
                          </li>
                        </ul>
                      </div>
                          </li>
                        </ul>
                      </div>

                    </div>
                  </div>
                </div>
              </li>
            </nav>
          </div>
  </header>

CSS

/* Import fonts */
@font-face {
  font-family: MaxwellBold;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20BOLD.ttf")
  format("truetype");
}
@font-face {
  font-family: MaxwellRegular;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20REGULAR.ttf")
  format("truetype");
}

header {
  font-family: MaxwellRegular;
  display: flex;
  padding: 1.1%;
  width: 100%;
  background: black;
  justify-content: space-between;
  align-items: center;
  z-index: 12;
}

.head-dir-container{
  font-size: 15px;
  color: white;
}

/* Keeps the box sizing consistent between items (i believe this was added for better mobile support) */
.head-dir-container, .head-dir-container * {
  box-sizing: border-box;
}

/*  */
.head-dir-container a {
  text-decoration: none;
  color: white;
  display: inline-block;
}

/*  */
.head-dir{
  position: relative;
}

/* only styles the outermost ul. not any of the links */
.head-dir > ul{
  display: flex;
  list-style: none;
  /* max-width: 800px; <-- May not do anything of major significance. Otherwise the arrow goes in a weird area.*/
  margin: 0 auto; /* Automatically centers the dir buttons; 0 for left/right, auto for up/down */
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.head-dir-container .head-dir-title{
  font-family: MaxwellBold;
  font-size: 60px;
  color: white;
}

.head-dir-title img{ 
  vertical-align: top;
  width: 60px;
}

#headDirAbout:hover {
  --hovered-about: 1;
}

#headAboutMega{
  background-color: black;
  padding: 10px;
  border-radius: 30px;
}

/* Hides and positions all of the submenu contents. It also disables pointer events to prevent accidental menu interactions while hidden */
.head-dir-container .head-dir-submenu-container{ 
  pointer-events: none;
 ...

JavaScript

import { easings, spring, animate } from 'https://esm.sh/animejs';
// There is supposed to be the animeJS library animating the dropdown to even work in the first place.
// Please use the current setup, I intend to fix the math and the animations later. This is my oldest *working* version.


var dropdownMovingPos = -window.innerHeight
//var dropdownMovingSpeed = -dropdownMovingPos + 100
const fps = 60

setInterval(function() {
  if(getComputedStyle(document.getElementById('headDirAbout')).getPropertyValue('--hovered-about') == 1) {
    animate('#headDirAboutArrow',{
      rotate: 0,
      duration: 300,
      loop: false,
      easing: 'easeIn',
    });
    animate('#headAboutMega',{
      y: 0,
      duration: 700,
      loop: false,
      easing: 'easeOut',
    });
  } else {
    animate('#headDirAboutArrow',{
      rotate: -90,
      duration: 300,
      loop: false,
      easing: 'easeIn',
    });
    animate('#headAboutMega',{
      y: dropdownMovingPos/1.5,
      duration: 700,
      loop: false,
      easing: 'easeIn',
    });
  };
}, 1000 / fps);