Dropdown not extending below the nav bar and just replacing the original link

Question

The dropdown instead of going below the nav bar just replaces the link. I have tried everything but couldn't find a solution.

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

score 1 · Accepted Answer · answered Sep 09 '18 at 20:27

First of all you have to choose appropriate html tag and also need to know their right uses. It will be better to write each navbar link in list items because each item are collection of list or you can put link inside div as well. Likely, You also must know about how to control and style your html. Following code work properly, try this one:

Your html code:

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

Now you need to put corresponding css to style above navbar:

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

Dropdown not extending below the nav bar and just replacing the original link

1 Answers1