CODEWITHSUNDEEP
css
AdaptJake
AdaptJake

Reputation: 3

Dropdown menu with full width over parents's width

I'm trying to make full-width dropdown menu.

but width of parents is 1500px, so the dropdown menu can't be full width. (100vw)

is there any solution with it? I tried to put some full-width white DIV section behind of the dropdown content but there's no luck.

I need help :(

Thanks advance for your help.

Here's codepen link.

'https://codepen.io/DOSH360/pen/qBaKKoq'

Upvotes: 0

Views: 477

Answers (1)

Raheel Junaid
Raheel Junaid

Reputation: 587

Absolute positioning is positioned to the nearest positioned ancestor. Your nearest positioned ancestor is your container which is taking up 100% of the width of your 1500px navigation.

Change your container from

.container {
  position: relative; /* Absolute Positioning Restraint */
  width: 100%;
  margin: 0 auto;
  background-color: white;
}

to

.container {
  width: 100%;
  margin: 0 auto;
  background-color: white;
}

I've tested this out and it spans to the full width. I hope I could help :)

If you'd like to learn more about how this works, I'd recommend Mozilla's in-depth article about Positioning.

Upvotes: 1

Related Questions