document.addEventListener('DOMContentLoaded', () => {
    const cloudMenu = document.querySelector('.menu .main li.cloud_menu');
    const submenu = cloudMenu.querySelector('ul.submenu');
    let showTimer, hideTimer;
  
    if (cloudMenu && submenu) {
      // Show submenu with delay
      cloudMenu.addEventListener('mouseenter', () => {
        clearTimeout(hideTimer); // Cancel hiding if mouse re-enters
        showTimer = setTimeout(() => {
          submenu.style.display = 'block';
        }, 100); // 100ms delay for showing
      });
  
      // Hide submenu with delay
      cloudMenu.addEventListener('mouseleave', () => {
        clearTimeout(showTimer); // Cancel showing if mouse leaves quickly
        hideTimer = setTimeout(() => {
          submenu.style.display = 'none';
        }, 200); // 200ms delay for hiding
      });
  
      // Close submenu when clicking outside
      document.addEventListener('click', (event) => {
        if (!cloudMenu.contains(event.target)) {
          submenu.style.display = 'none';
        }
      });
  
      // Close submenu on back button navigation
      window.addEventListener('popstate', () => {
        submenu.style.display = 'none';
      });

      // Ensure submenu is hidden when page is restored from cache
      window.addEventListener('pageshow', (event) => {
        if (event.persisted) {
        submenu.style.display = 'none';
        }
        });
        
    }
  });