CODEWITHSUNDEEP
htmlcss
Brandon Powell
Brandon Powell

Reputation: 83

Dropdown Style Issue in the CSS

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;
}

Upvotes: 0

Views: 455

Answers (2)

Maz
Maz

Reputation: 113

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: Layout of the website after applying the changes.

More references

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

Upvotes: 1

user14979715
user14979715

Reputation:

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.

Upvotes: 1

Related Questions