CODEWITHSUNDEEP
htmlcss
Alexander
Alexander

Reputation: 311

Cannot add distance between droplist and its content that overlaps some other elements

I cannot add distance between About us and a navigation tab without cursor failing to reach the tab when it hovers over the About us panel.

I tried appending margin-top:; and margin-bottom:; but did not pay off. Also, I deliberately did not remove <hr> tags, because it is a must to keep them and I hunched they could have prevented my intention from happening.

.dropdown {
  padding: 10px;
  position: relative;
  display: inline-block;
}

.dropdown .list {
  padding: 15px;
  border: 10px solid transparent;
  color: black;
  text-decoration: none;
}

.dropdown .dropcontent {
  display: none;
  background-color: white;
  position: absolute;
  border: 1px solid;
}

.dropdown .dropcontent a {
  display: block;
  padding: 10px;
  min-width: 150px;
  text-decoration: none;
  color: black;
}

.dropdown:hover .dropcontent {
  display: block;
}
<hr>
<div class="navbar">
  <div class="dropdown">
    <a href="#" class="list">About us</a>
    <div class="dropcontent">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>
<hr>

Upvotes: 0

Views: 23

Answers (1)

Tan Duong
Tan Duong

Reputation: 2142

You can add position: absolute and top: 47px to the .dropcontain 

.dropdown {
  padding: 10px;
  position: relative;
  display: inline-block;
}

.dropdown .list {
  padding: 15px;
  border: 10px solid transparent;
  color: black;
  text-decoration: none;
}

.dropdown .dropcontent {
  display: none;
  background-color: white;
  position: absolute;
  border: 1px solid;
  position: absolute;
  top: 47px;
}

.dropdown .dropcontent a {
  display: block;
  padding: 10px;
  min-width: 150px;
  text-decoration: none;
  color: black;
}

.dropdown:hover .dropcontent {
  display: block;
}
<hr>
<div class="navbar">
  <div class="dropdown">
    <a href="#" class="list">About us</a>
    <div class="dropcontent">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>
<hr>

Upvotes: 1

Related Questions