Html 下拉菜单不延伸至导航条下方，仅替换原始链接

下拉列表代替导航栏下方的链接。我什么都试过了，但找不到解决办法

@charset“UTF-8”；
身体{
边际：0px；
填充：0px；
}
/*顶部导航*/
.标题{
背景色：#7acc68；
宽度：100%；
边际：0px；
填充：0px；
溢出：隐藏；
}
.toptitle p{
边际：0px；
填充：0px；
溢出：隐藏；
字体系列：“源代码Pro”，monospace；
字体大小：35px；
颜色：黑色；
字体大小：粗体；
}
navbar先生{
背景色：#7acc68；
宽度：100%；
边际：0px；
填充：0px；
溢出：隐藏；
}
纳瓦尔先生{
浮动：左；
字体大小：25px；
颜色：黑色；
边际：0px；
填充：10px；
字体系列：“源代码Pro”，monospace；
}
.导航栏a:悬停{
背景色：#c9c9c9；
}
.下拉列表{
浮动：左；
溢出：隐藏；
位置：相对位置；
显示：块；
颜色：丽贝卡紫；
}
.下载{
边际：0px；
填充：10px；
溢出：隐藏；
}
.dropdown:悬停.dropdownContent{
显示：块；
}
.下载内容{
显示：无；
背景色：#c9c9c9；
边际：0px；
填充：0px；
溢出：隐藏；
位置：绝对位置；
z指数：1；
}
.下载内容a{
显示：块；
}
/*底部导航*/
.底线{
背景色：#7acc68；
宽度：100%；
边际：0px；
填充：0px；
溢出：隐藏；
}
/*主要内容*/
.主要内容{
背景色：#D3；
宽度：100%；
边际：0px；
填充：0px；
溢出：隐藏；
颜色：黑色；
字体系列：“Roboto”，无衬线；
}

雅各布·塔夫茨

格格赫

埃盖奇

首先，您必须选择合适的html标记，还需要知道它们的正确用法。最好在列表项中写入每个导航栏链接，因为每个项都是列表的集合，也可以将链接放在div中。很可能，您还必须知道如何控制和设置html的样式。以下代码工作正常，请尝试此代码：

您的html代码：

<div class="navbar">
   <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li class="dropdown">
        <a href="#">Programmer <i class="fa fa-caret-down"></i> </a>
        <ul class="dropdown-content">
          <li><a href="#">General <b>IT</b></a></li>
          <li><a href="#">Networking</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#">Technician <i class="fa fa-caret-down"></i> </a>
        <ul class="dropdown-content">
          <li><a href="#">Audio</a></li>
          <li><a href="#">Lighting</a></li>
          <li><a href="#">Lighting</a></li>
        </ul>
      </li>
    </ul>
</div>

.navbar {
   background-color: 7acc68;
   width: 100%; 
}  
.navbar ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.navbar ul li {
  display: inline-block;
}
.navbar ul li a {
  display: inline-block;
  color: #ffffff;
  padding: 8px 10px;
}
.navbar ul li a i {
  padding-left: 5px;
  float: right;
}
.navbar ul li.dropdown {
  position: relative;
}
.navbar ul li.dropdown .dropdown-content {
  background: #000000;
  position: absolute;
  min-width: 150px;
  left: 0;
  top: 100%;
  display: none;
}
.navbar ul li.dropdown .dropdown-content li {
  display: block;
}
.navbar ul li.dropdown .dropdown-content li a {
    display: block;
}
.navbar ul li:hover > a {
  background-color: #c9c9c9;
  color: #000000;
}
.navbar ul li.dropdown:hover .dropdown-content {
  display: block;
}