Как сделать выпадающее меню у блока МЕ301N из блоков FT301-305 в Tilda на экранах 980px+

<script>
const linkObject = {
  "/about":    "uc-drop-menu-1",
  "/works":    "uc-drop-menu-2",
  "#services": "uc-drop-menu-3",
  "#social":   "uc-drop-menu-4"
};
document.addEventListener('DOMContentLoaded', function() {
  const multyMenu = document.querySelector('.uc-multy-menu');
  if (multyMenu) {
    const allLinks = multyMenu.querySelectorAll('a');
    let activeDropMenu = null;
    let activeLink = null;
    let currentHoveredLink = null;
    let scrollTimeout = null;
    function getBottomPosition(linkElement) {
      const parentBlock = linkElement.closest('.t-menu-base');
      if (!parentBlock) return 0;
      const rect = parentBlock.getBoundingClientRect();
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const bottomPosition = rect.bottom + scrollTop;
      console.log('Bottom position:', bottomPosition);
      return bottomPosition;
    }
    function showDropMenu(linkElement, dropMenuClass) {
      const dropMenu = document.querySelector(`.${dropMenuClass}`);
      if (!dropMenu) {
        console.log('Drop menu not found:', dropMenuClass);
        return null;
      }
      const topPosition = getBottomPosition(linkElement);
      dropMenu.classList.add('show-drop-menu');
      dropMenu.style.position = 'absolute';
      dropMenu.style.top = `${topPosition}px`;
      dropMenu.style.zIndex = '1000';
      console.log('Showing menu:', dropMenuClass, 'top:', topPosition);
      return dropMenu;
    }
    function hideDropMenu(dropMenu) {
      if (dropMenu) {
        dropMenu.classList.remove('show-drop-menu');
        dropMenu.style.top = '';
        console.log('Hiding menu');
      }
    }
    function hideActiveMenu() {
      if (activeDropMenu) {
        hideDropMenu(activeDropMenu);
        activeDropMenu = null;
        activeLink = null;
      }
      currentHoveredLink = null;
    }
    function handleScroll() {
      if (activeDropMenu) {
        console.log('Scroll detected, hiding menu');
        if (scrollTimeout) {
          clearTimeout(scrollTimeout);
        }
        hideActiveMenu();
        scrollTimeout = setTimeout(() => {
          scrollTimeout = null;
        }, 100);
      }
    }
    function handleLinkMouseEnter(event) {
      const link = event.currentTarget;
      const href = link.getAttribute('href');
      console.log('Mouse enter on link:', href);
      if (linkObject[href]) {
        const dropMenuClass = linkObject[href];
        if (activeLink && activeLink !== link) {
          hideActiveMenu();
        }
        if (!activeDropMenu || activeLink !== link) {
          const newDropMenu = showDropMenu(link, dropMenuClass);
          if (newDropMenu) {
            activeDropMenu = newDropMenu;
            activeLink = link;
          }
        }
      } else {
        console.log('Hover on non-matching link, hiding menu');
        hideActiveMenu();
      }
      currentHoveredLink = link;
    }
    function handleDropMenuEnter(dropMenu) {
      console.log('Mouse enter on drop menu');
    }
    function handleDropMenuLeave(dropMenu) {
      console.log('Mouse leave from drop menu');
      const isHoveringMultyMenu = multyMenu.matches(':hover');
      if (!isHoveringMultyMenu) {
        hideActiveMenu();
      }
    }
    function handleMultyMenuLeave(event) {
      console.log('Mouse leave from multy menu');
      setTimeout(() => {
        if (activeDropMenu) {
          const isHoveringDropMenu = activeDropMenu.matches(':hover');
          const isHoveringMultyMenu = multyMenu.matches(':hover');
          if (!isHoveringDropMenu && !isHoveringMultyMenu) {
            hideActiveMenu();
          }
        }
      }, 50);
    }
    function handleMultyMenuClick(event) {
      console.log('Click on multy menu');
      const target = event.target;
      const isLink = target.closest('a');
      if (!isLink) {
        hideActiveMenu();
      } else {
        const href = isLink.getAttribute('href');
        if (!linkObject[href]) {
          hideActiveMenu();
        }
      }
    }
    allLinks.forEach(link => {
      link.addEventListener('mouseenter', handleLinkMouseEnter);
    });
    multyMenu.addEventListener('mouseleave', handleMultyMenuLeave);
    multyMenu.addEventListener('click', handleMultyMenuClick);
    window.addEventListener('scroll', handleScroll, { passive: true });
    function addDropMenuHandlers() {
      Object.values(linkObject).forEach(menuClass => {
        const dropMenu = document.querySelector(`.${menuClass}`);
        if (dropMenu && !dropMenu.hasAttribute('data-handlers-added')) {
          dropMenu.addEventListener('mouseenter', () => handleDropMenuEnter(dropMenu));
          dropMenu.addEventListener('mouseleave', () => handleDropMenuLeave(dropMenu));
          dropMenu.setAttribute('data-handlers-added', 'true');
          console.log('Added handlers to:', menuClass);
        }
      });
    }
    addDropMenuHandlers();
    const observer = new MutationObserver(function(mutations) {
      addDropMenuHandlers();
      const newLinks = multyMenu.querySelectorAll('a');
      newLinks.forEach(link => {
        if (!link.hasAttribute('data-handler-added')) {
          link.addEventListener('mouseenter', handleLinkMouseEnter);
          link.setAttribute('data-handler-added', 'true');
        }
      });
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
    allLinks.forEach(link => {
      if (!link.hasAttribute('data-handler-added')) {
        link.setAttribute('data-handler-added', 'true');
      }
    });
  }
});
</script>
<style>
div[class*="uc-drop-menu"] {
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
}
div[class*="uc-drop-menu"].show-drop-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
</style>