Multiple MegaMenuDropdowns: Positioning and functionality issues with centered layout #1610

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

We need to implement a navbar with multiple mega menu dropdowns that have consistent width and centered positioning, as shown in the attached image. However, we're encountering two main issues when trying to achieve this with flowbite-react components and Flotiq React Blocks PRO examples.

Issues Encountered

Issue 1: MegaMenuDropdownToggle Approach

When using MegaMenuDropdownToggle components (from FlowbiteBlock PRO MegaMenuHeader example):

• Only the first dropdown opens correctly
• All subsequent dropdowns open the same (first) dropdown content
• Setting custom id attributes and data-collapse-toggle properties doesn't resolve the issue
• The menuOpen prop doesn't work as expected (menu opens by default regardless of the prop value)

Issue 2: MegaMenuDropdown with toggle Prop Approach

When using MegaMenuDropdown components with the toggle prop:

• Multiple dropdowns work functionally (each opens its own content)
• However, it's impossible to achieve consistent centered positioning
• CSS positioning attempts fail:
  • theme.base with fixed, left-1/2, and -translate-x-1/2 classes don't center properly
  • Inline style prop with left: "50%" and transform: "translateX(-50%)" gets overridden
  • Custom theme styles are ignored or overridden by internal component styles

Issue 3: Multiple MegaMenu Components

When trying to use multiple MegaMenu components within a single NavbarCollapse:

• Clicking one dropdown doesn't close others (multiple dropdowns can be open simultaneously)
• Creates invalid HTML structure (nested <nav> elements within <ul>)

Steps to reproduce

Reproduce Issue 1 (MegaMenuDropdownToggle)

1. Visit the CodeSandbox example
2. Ensure preview is at least 1280px width (desktop view)
3. Click "Company" in the first navbar
4. Click "Marketing" in the first navbar

Current behavior

Both buttons open the same dropdown content.

Expected behavior

Each button should open its own unique dropdown content, with proper toggle behavior (clicking one closes the other).

Reproduce Issue 2 (MegaMenuDropdown styling)

1. Visit the same CodeSandbox example
2. Ensure preview is at least 1280px width (desktop view)
3. Click "Company" in the second navbar
4. Click "Marketing" in the second navbar
5. Observe the positioning of the dropdown menus

Current behavior

Dropdowns open but are not centered consistently. Styling attempts are ignored.

Expected behavior

All dropdowns should be centered horizontally on the page with consistent positioning, similar to the first navbar's visual appearance.

Context

This issue occurs across all browsers, screen sizes, and operating systems.

Demo Repository: https://codesandbox.io/p/github/SalvadorDalia/flowbite-mega-menu/main

Expected Solution

We need a way to:

1. Create multiple functional mega menu dropdowns within a single navbar
2. Ensure each dropdown opens its own unique content
3. Provide reliable styling options for consistent centered positioning
4. Maintain proper HTML semantics and accessibility
5. Support proper toggle behavior (opening one closes others)