Dropdown menu HTML + CSS

Question

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

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

thanks for the input everyone

user4609276
– user4609276

2016-01-31 17:25:50 +00:00
Commented Jan 31, 2016 at 17:25 — user4609276
– user4609276, Commented Jan 31, 2016 at 17:25

Gene R · Accepted Answer · 2016-01-31 17:05:24Z

2

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

answered Jan 31, 2016 at 17:05

Gene R

3,7442 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A.Sharma Over a year ago

The relative positioning of the container sets this apart from the other answers.

Profesor08 · Accepted Answer · 2016-01-31 17:05:52Z

0

You have to add position:absolute in .sub class

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

answered Jan 31, 2016 at 17:05

Profesor08

1,2571 gold badge15 silver badges22 bronze badges

Comments

davbuc · Accepted Answer · 2016-01-31 17:06:57Z

0

just add position:absolute to .sub like this:

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

answered Jan 31, 2016 at 17:06

davbuc

5376 silver badges14 bronze badges

Comments

yankie palans · Accepted Answer · 2016-01-31 17:33:38Z

0

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

answered Jan 31, 2016 at 17:33

yankie palans

529 bronze badges

Collectives™ on Stack Overflow

Dropdown menu HTML + CSS

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related