[FEATURE] CSS-only Animated Dropdowns & Mega Menus

[sahare-mayur-0071]

Description
I propose adding a robust set of CSS-only animated dropdown components to the EaseMotion framework. This will include standard list-style dropdowns (for profile menus or settings) as well as full-width "Mega Menus" (for complex e-commerce or SaaS navigation).

The implementation will rely entirely on CSS :hover and :focus-within pseudo-classes to manage visibility, avoiding the need for JavaScript event listeners while maintaining keyboard accessibility.

Why is this useful for EaseMotion CSS?
Complex dropdowns and mega menus are notorious for requiring clunky JavaScript to handle "click outside to close" logic and hover delays. By using a clever combination of CSS opacity, visibility, transform, and :focus-within, we can create highly performant, accessible dropdowns that smoothly slide into view on hover or keyboard focus, perfectly aligning with EaseMotion's zero-dependency philosophy.

HTML Snippet
html

Account ▾

<!-- The Dropdown Content -->
<div class="ease-dropdown-menu ease-dropdown-slide-up">
  <a href="#" class="ease-dropdown-item">Profile</a>
  <a href="#" class="ease-dropdown-item">Settings</a>
  <div class="ease-dropdown-divider"></div>
  <a href="#" class="ease-dropdown-item ease-text-danger">Logout</a>
</div>

Features ▾

<!-- Full-width Mega Menu Content -->
<div class="ease-dropdown-menu ease-mega-menu ease-dropdown-slide-down">
  <div class="ease-grid ease-grid-cols-3 ease-gap-4">
    <div>
      <h4 class="ease-font-bold ease-margin-b-2">Design</h4>
      <a href="#" class="ease-dropdown-item">Components</a>
      <a href="#" class="ease-dropdown-item">Tokens</a>
    </div>
    <!-- ... more columns ... -->
  </div>
</div>

CSS Snippet css /* Wrapper establishes relative positioning context for standard dropdowns */ .ease-dropdown-wrapper { position: relative; display: inline-block; } /* The Trigger */ .ease-dropdown-trigger { cursor: pointer; } /* Base Dropdown Menu Styles (Hidden by default) */ .ease-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 200px; background-color: var(--ease-color-surface); border-radius: var(--ease-radius-md); box-shadow: var(--ease-shadow-lg); border: 1px solid var(--ease-color-neutral-200); padding: var(--ease-space-2) 0; z-index: 50;

/* Hidden State using visibility instead of display:none for animation */
opacity: 0;
visibility: hidden;
pointer-events: none;

/* Initial transform state for animation /
transform: translateY(10px);
transition: opacity var(--ease-speed-fast) var(--ease-ease),
transform var(--ease-speed-fast) var(--ease-ease),
visibility var(--ease-speed-fast) var(--ease-ease);
}
/

• The Reveal Logic
• Triggers on mouse hover OR when a child element (like a link) receives keyboard focus
  /
  .ease-dropdown-wrapper:hover .ease-dropdown-menu,
  .ease-dropdown-wrapper:focus-within .ease-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0); / Slide up to final position /
  }
  / Dropdown Item Styling /
  .ease-dropdown-item {
  display: block;
  padding: var(--ease-space-2) var(--ease-space-4);
  color: var(--ease-color-text);
  text-decoration: none;
  font-size: var(--ease-text-sm);
  transition: background-color var(--ease-speed-fast) var(--ease-ease);
  }
  .ease-dropdown-item:hover,
  .ease-dropdown-item:focus {
  background-color: var(--ease-color-neutral-100);
  color: var(--ease-color-primary);
  outline: none;
  }
  / Mega Menu Modifiers /
  .ease-mega-wrapper {
  position: static; / Mega menus are positioned relative to the nearest positioned ancestor (usually the nav bar) /
  }
  .ease-mega-menu {
  left: 0;
  right: 0;
  width: 100%;
  padding: var(--ease-space-6);
  / Slide down animation for mega menus instead of sliding up */
  transform: translateY(-10px);
  }
  Visual Reference (optional)
  N/A

Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.

[github-actions]

Hey @sahare-mayur-0071! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside submissions/examples/your-feature-name/
• Include demo.html · style.css · README.md in your folder
• Max 2 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡