CODEWITHSUNDEEP
htmlcss
user4609276
user4609276

Reputation:

Dropdown menu HTML + CSS

Trying to practice creating a dropdown. Not sure if this is even the best way, but here's my take on it.

https://jsfiddle.net/dtkreox3/1/

HTML

<ul class="test">
  <li class="main"><a href="#">Hover</a>
    <ul class="sub">
      <li>Link 1</li>
      <li>Link 1</li>
      <li>Link 1</li>
      <li>Link 1</li>
     </ul>
  </li>


  <li class="main"><a href="#">About</a></li>
</ul>

CSS

.test {
  border: 1px solid black;
  width: 500px;
}

.main {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
}

.sub {
  border: 1px solid black;
  list-style: none;
  width: 50px;
  display: none;
}

.main:hover .sub {
  display: block;
}

I don't understand why when you hover over the first menu, the "About" gets dropped down. How do I fix this?

also is display: none the best way to hide the content? what about visibility: 0 and opacity: 0?

Thanks

Upvotes: 1

Views: 138

Answers (4)

yankie palans
yankie palans

Reputation: 52

you should add position absolute to sub class and relative to class main

`.sub {
  border: 1px solid black;
  list-style: none;
  width: 50px;
  display: none;
  position: absolute;
  }

.main {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  position: relative;
}`

Upvotes: 0

davbuc
davbuc

Reputation: 537

just add position:absolute to .sub like this:

.sub {
  border: 1px solid black;
  list-style: none;
  width: 50px;
  display: none;
  position: absolute;
}

Upvotes: 0

Profesor08
Profesor08

Reputation: 1258

You have to add position:absolute in .sub class

.sub {
  border: 1px solid black;
  list-style: none;
  width: 50px;
  display: none;
  position: absolute;
}

Upvotes: 0

Gene R
Gene R

Reputation: 3744

Add position:relative to .main and position:absolute to .sub

Upvotes: 2

Related Questions