Dropdown Menu in Navbar is in Wrong Position - CSS & React

Question

I'm having an issue with CSS of my dropdown menu class. When I hover over weapons it will show the dropdown menu but in the wrong position. I need the dropdown menu right below the "Weapons" nav link and this is my current CSS below:

 .dropdown-menu { width: 200px; position: absolute; top: 80px; list-style: none; text-align: start; /* right: 500px; */ }.dropdown-menu li { background: #242222; cursor: pointer; }.dropdown-menu li:hover { background: #950000; }.dropdown-menu.clicked { display: none; }.dropdown-link { display: block; width: 100%; height: 100%; text-decoration: none; color: white; padding: 16px; }

The picture below is what is looks like when you hover over the weapons link on the nav bar.

https://i.stack.imgur.com/Irnpa.png

Any help would be appreciated.

Answer 1

As mentioned in the comments, this is impossible to really diagnose without seeing the html. That being said, your parent element is set to position: absolute . If dropdown-link is a child of dropdown-menu li , I'd try adding position: relative to .dropdown-menu li and see if that does the trick.