下拉菜单没有扩展到导航栏下方，仅替换了原始链接

Question

下拉菜单而不是导航栏下方的内容仅替换了链接。我已经尝试了一切，但是找不到解决方案。

@charset "UTF-8";
body {
  margin: 0px;
  padding: 0px;
}


/*Top Nav*/

.toptitle {
  background-color: #7acc68;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.toptitle p {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  font-family: 'Source Code Pro', monospace;
  font-size: 35px;
  color: black;
  font-weight: bold;
}

.navbar {
  background-color: #7acc68;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.navbar a {
  float: left;
  font-size: 25px;
  color: black;
  margin: 0px;
  padding: 10px;
  font-family: 'Source Code Pro', monospace;
}

.navbar a:hover {
  background-color: #c9c9c9;
}

.dropdown {
  float: left;
  overflow: hidden;
  position: relative;
  display: block;
  color: rebeccapurple;
}

.dropdown a {
  margin: 0px;
  padding: 10px;
  overflow: hidden;
}

.dropdown:hover .dropdownContent {
  display: block;
}

.dropdownContent {
  display: none;
  background-color: #c9c9c9;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

.dropdownContent a {
  display: block;
}


/*Bottom nav*/

.bottombar {
  background-color: #7acc68;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}


/*Main Content*/

.maincontent {
  background-color: #d3d3d3;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  color: black;
  font-family: 'Roboto', sans-serif;
}

<!--Fonts---Roboto,Source Code Pro--->
<link href="https://fonts.googleapis.com/css?family=Roboto|Source+Code+Pro" rel="stylesheet">
<!--Font Awesome--->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="toptitle">
  <p> Jacob Tufts</p>
</div>
<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Programmer</a>
  <div class="dropdown">
    <a href="#">Computer Guy<i class="fa fa-caret-down"></i></a>
    <div class="dropdownContent">
      <a href="#">General <b>IT</b></a>
      <a href="#">Networking</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="#">Technician<i class="fa fa-caret-down"></i></a>
    <div class="dropdownContent">
      <a href="#">Audio</a>
      <a href="#">Lighting</a>
      <a href="#">projection</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="#">Videographer<i class="fa fa-caret-down"></i></a>
    <div class="dropdownContent">
      <a href="#">Editing</a>
      <a href="#">Video</a>
    </div>
  </div>
</div>
<div class="maincontent">
  <p>gegeheheh</p>
</div>
<div class="bottombar">
  <p>egegege</p>
</div>

Answer 1

首先，您必须选择适当的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>

现在您需要在导航栏上方放置相应的CSS样式：

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