html - 如何停止导航栏下拉菜单中背景高度的增加？

Question

我有一个导航栏，其中有悬停元素的下拉菜单，但它们显示在与导航栏相同的背景上，我希望这些元素出现在导航栏上方，这样它们就不会增加导航栏。这是 fiddle .

HTML 代码

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
  <nav>
    <ul>
      <li><img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"></li>
      <li class="dropdown">
        <a href="#"><b>PROGRAMS</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>INDIVIDUAL</i></a>
          </li>
          <li><a href="#"><i>CORPORATE</i></a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#"><b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>BE EXTRODINARY</i></a>
          </li>
          <li><a href="#"><i>RISK &amp; REWARD</i></a>
          </li>
          <li><a href="#"><i>BLOG</i></a>
          </li>
          <li><a href="#"><i>OUR STORY</i></a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

CSS 代码

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav ul > li {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
}

.topnav a {
  text-decoration: none;
  font-size: 17px;
  color: white;
  display: block;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.topnav ul > li > ul {
  display: none;
  width: 200px;
  padding: 0;
  position: absolute;
  background-color: #f76c38;
}
.topnav ul > li > ul > li {
  float: left;
  clear: left;
  display: block;
  text-align: left;
}

.dropdown {
    margin-left: 50px !important;
    position: relative;
    top: 10px;
}

.dropdown-content {
    display: none;
}

.dropdown:hover>.dropdown-content {
    display: block;
    color: white;
    font-family: "Adelle PE";
    font-size: 12px;
    font-style: italic;
    text-decoration: none;
    position: relative;
}

Answer 1

已添加

.topnav {
      float: left;
      width: 100%;
}

从 .dropdown:hover>.dropdown-content 中移除了 position: relative;

.topnav {
  float: left;
  width: 100%;
  background-color: #333;
}

.topnav ul>li {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
}

.topnav a {
  text-decoration: none;
  font-size: 17px;
  color: white;
  display: block;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav ul>li>ul {
  display: none;
  width: 200px;
  padding: 0;
  position: absolute;
  background-color: #f76c38;
  overflow: auto;
  max-height: 150px;
}

.topnav ul>li>ul>li {
  float: left;
  clear: left;
  display: block;
  text-align: left;
}

.dropdown {
  margin-left: 50px !important;
  position: relative;
  top: 10px;
}

.dropdown-content {
  display: none;
}

.dropdown:hover>.dropdown-content {
  display: block;
  color: white;
  font-family: "Adelle PE";
  font-size: 12px;
  font-style: italic;
  text-decoration: none;
  z-index: 2;
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
  <nav>
    <ul>
      <li><img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"></li>
      <li class="dropdown">
        <a href="#"><b>PROGRAMS</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>INDIVIDUAL</i></a>
          </li>
          <li><a href="#"><i>CORPORATE</i></a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#"><b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>BE EXTRODINARY</i></a>
          </li>
          <li><a href="#"><i>RISK &amp; REWARD</i></a>
          </li>
          <li><a href="#"><i>BLOG</i></a>
          </li>
          <li><a href="#"><i>OUR STORY</i></a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>