如何在导航栏中的下拉列表中停止背景高度增加？

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

从position: relative;

中删除了.dropdown:hover>.dropdown-content

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;