Html 如何在导航栏中阻止背景高度在下拉菜单中增加？

我有一个导航栏，其中有悬停元素的下拉列表，但它们显示在与导航栏相同的背景上，我希望这些元素显示在导航栏上，这样它们就不会增加导航栏的高度。这是你的电话号码

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>

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

增加

移除

位置：相对来自
。下拉列表：悬停>。下拉列表内容


.topnav{
浮动：左；
宽度：100%；
背景色：#333；
}
.topnav ul>li{
浮动：左；
显示：块；
文本对齐：居中；
填充：14px 16px；
}
.topnav a{
文字装饰：无；
字号：17px；
颜色：白色；
显示：块；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav ul>li>ul{
显示：无；
宽度：200px；
填充：0；
位置：绝对位置；
背景色：#f76c38；
溢出：自动；
最大高度：150像素；
}
.topnav ul>li>ul>li{
浮动：左；
清除：左；
显示：块；
文本对齐：左对齐；
}
.下拉列表{
左边距：50px！重要；
位置：相对位置；
顶部：10px；
}
.下拉内容{
显示：无；
}
.下拉列表：悬停>.下拉列表内容{
显示：块；
颜色：白色；
字体系列：“阿德勒体育”；
字体大小：12px；
字体：斜体；
文字装饰：无；
z指数：2；
背景颜色：灰色；
}

























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