Is there an existing issue for this?

• I have searched the existing issues.

Describe the bug

The dropdown menu in the Netlify deployment (https://circuitverse.netlify.app/simulatorvue) is getting clipped behind the navigation bar, making the menu options inaccessible. However, in the original CircuitVerse website (https://circuitverse.org/simulator), the dropdown appears correctly. This is a critical UI issue as users will not be able to see or interact with the dropdown menu properly.

Additionally, the underline appears in a different position between the hover and non-hover states, causing an inconsistent and visually unappealing effect. The dropdown arrow animation also exhibits abnormal behavior, which impacts the overall user experience.

Steps to Reproduce

1. Open the Netlify deployment of the project. (https://circuitverse.netlify.app/simulatorvue)
2. Hover over the "Tools" or any other menu item with a dropdown.
3. Observe that the dropdown menu is partially or fully hidden behind the navigation bar.
4. Compare this behavior with the original CircuitVerse website. (https://circuitverse.org/simulator}
5. Also, hover over the navbar items and notice the inconsistency in the underline and arrow animations.

Expected Behavior

• The dropdown menu should always be fully visible and not hidden behind the navbar.
• Hover effects should be smooth and consistent in both underline placement and arrow animation.

Screenshots

In the original site:

In the vue v0 version:

Is the faced issue/bug related to the Vue simulator?

Yes

Used Vue simulator with or without backend?

None

Is the bug present only on the dev server, the build, or both?

Both

Device Information

OS: macOS (Sequoia - 15.3.1)
Browser: Brave

Additional Context

No response

Are you working on this issue?

Yes