I am working on a Shopify project. In Shopify we can add navigation items, so I made a mega menu. When the user hovers on a item in the mega menu all the content inside that will be shown, but I want that to be fixed in a container where all nested items can be seen https://i.sstatic.net/oFCRwpA4.png https://i.sstatic.net/Dt5ehx4E.png https://i.sstatic.net/XIe9GUuc.png The previous issue I faced was whenever I hovered in it, items would slide away. I corrected that using Javascript, but now my problem is whenever I hover on any mega menu item the container which has all nested items should be fixed for all mega menu items. How can I achieve that? <div class="shadow-xl"> <div class="container mx-auto flex justify-between items-center px-0"> <nav class="hidden lg:flex w-full text-base font-medium"> <ul class="flex w-full justify-between p-3 space-x-2"> {% for link in linklists.mini-header.links %} <li class="relative group text-gray-700 hover:bg-[#E87303] hover:text-white px-2 py-2 rounded whitespace-nowrap"> {% if link.title == "Image" %} <img src="{{ 'saree' | image_url }}" alt="best sellers" class="h-6 w-6" width="24" height="24" /> {% else %} <a href="{{ link.url }}" class="text-md"> {{ link.title }} </a> {% endif %} {% if link.links != blank %} <div class="relative"> <div class="absolute z-50 top-0 hidden mt-2 bg-white text-gray-700 rounded-lg shadow-lg group-hover:block dropdown-menu" style="width: 1200px;"> <ul class="flex space-x-8 p-4"> {% for child in link.links %} <li class="px-4 py-2 "> <h3 class="font-bold font-playfair text-xl text-gray-900 px-2 py-2">{{ child.title }}</h3> {% if child.links != blank %} <ul class="space-y-2"> {% for grandchild in child.links %} <li class="px-2 py-1" style="white-space: nowrap; width: 100%;"> <a href="{{ grandchild.url }}" class="block w-full"> {{ grandchild.title }} </a> </li> {% endfor %} </ul> {% endif %} </li> {% endfor %} </ul> </div> </div> {% endif %} </li> {% endfor %} </ul> </nav> </div> </div> <style> nav ul li .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 50; background-color: white; display: none; max-width: 1400px; white-space: nowrap; } nav ul li:hover .dropdown-menu { display: block; } </style> <script> document.addEventListener("DOMContentLoaded", function() { const dropdownMenus = document.querySelectorAll('.dropdown-menu'); dropdownMenus.forEach(menu => { const parentLi = menu.closest('li'); parentLi.addEventListener('mouseenter', function() { menu.style.left = '0'; menu.style.display = 'block'; const rect = parentLi.getBoundingClientRect(); const dropdownWidth = menu.offsetWidth; const overflowRight = (rect.right + dropdownWidth) - window.innerWidth; if (overflowRight > 0) { menu.style.left = `-${overflowRight}px`; } else { menu.style.left = '0'; } }); parentLi.addEventListener('mouseleave', function() { menu.style.display = 'none'; }); }); }); </script>