Dropdown Style Issue in the CSS

Question

I have a main horizontal menu inside a div. I want the dropdown menu to appear left underneath the div button that say "View The Perceptors". Now it just expands the div of the container when the dropdown is visible.

How can I make the dropdown go stay within the div? View the website link:

https://perception.works/

CSS CODE:

.dropdown {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  color: white;
  padding: 2.4em;
  gap: 65px;
  /* width: 100%; */
  background-color: #181024;
}

I guess this will help you https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button , Let me know it work for you — , Aug 27 '21 at 10:30
Please go to the website: Dropdown is out of the parent container. So, I trying to figure out how can I keep inside of the parent container with having it expand out to the right. — Brandon Powell, Aug 27 '21 at 10:36
"Please go to the website" - you need to create a [mcve] in your question otherwise it is off topic for SO - see [something on my website doesn't work, can I just paste a link to it?](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) — Pete, Aug 27 '21 at 10:37

score 1 · Accepted Answer · answered Aug 27 '21 at 10:48

You should have mentioned that you are trying to achieve this on responsive mode because otherwise on pc mode it didn't looked so good and I couldn't find where's the dropdown or menu! Change

.dropdown_menu{
height:auto;
}

and delete position absolute from your .dropdown because you are just making it to appear on top of everything and to not care about other elements. Also still, your button is not working.

score 1 · Answer 2 · answered Aug 27 '21 at 11:03

Main problem here is that if you want to have your .dropdown within the div container (.dropdown__menu) there will be some text that does not stay in the .dropdown.

.dropdown__menu {
    position: relative;
}

.dropdown {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  color: white;
  padding: 2.4em;
  gap: 65px;
  width: 100%;
  background-color: #181024;
}

An easy solution to this problem will require a little change to the layout by unsetting the property display: flex; from the .social-links class (basically just remove the class from the CSS file).

Result

The final layout is presented as follows:

More references

Additionally you could try setting the overflow of the text, here a couple links:

Dropdown Style Issue in the CSS

2 Answers2