Why do these divs keep displaying on top of each other?

January 22, 2022

I am trying to make a navigation bar with dropdowns when you hover. I got this from w3schools.com, but I wanted to have multiple drop downs next to each other. I have 2 of them next to each other, but when I hover over either of them, it shows the same dropdown menu. How do I fix this? Sorry if this seems obvious, I’m a beginner.
Heres the html:

  <a href="#home">Home</a>
  <a href="#news">Blog</a>
  <div class="dropdown">
    <button class="dropbtn">Projects ▼
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
<div class="dropdown">
        <button class="dropbtn">Archives ▼
    </button>
    <div class="dropdown-content">
      <a href="#">Hello</a>
      <a href="#">hi</a>
      <a href="#">how are you</a>
    </div>
  </div> 
  </div>
    <a href="#guestbook">Guestbook</a>
    <a href="#about">About Me</a>
      
</div>

The css:

  overflow: hidden;
  background-color: red;
  width: 620px;
    box-shadow: 0 2px 2px #FF0000, 
      -2px 1px 0 #D30000, 
      -4px 2px 0 #FE471E,
      -8px 3px 0 #FEF100,
      -12px 4px 0 #00A500,
      -16px 5px 0 #0080F6,
      -20px 6px 0 #20007D;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  text-align: center;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

>Solution :

You had a simple error with your pairing your div tags.

Fix your code like so and it should work:

 overflow: hidden;
  background-color: red;
  width: 620px;
    box-shadow: 0 2px 2px #FF0000, 
      -2px 1px 0 #D30000, 
      -4px 2px 0 #FE471E,
      -8px 3px 0 #FEF100,
      -12px 4px 0 #00A500,
      -16px 5px 0 #0080F6,
      -20px 6px 0 #20007D;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  text-align: center;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<a href="#home">Home</a>
<a href="#news">Blog</a>

<div class="dropdown">
  <button class="dropbtn">Projects ▼</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown">
    <button class="dropbtn">Archives ▼</button>
    <div class="dropdown-content">
      <a href="#">Hello</a>
      <a href="#">hi</a>
      <a href="#">how are you</a>
    </div>
</div> 


<a href="#guestbook">Guestbook</a>
<a href="#about">About Me</a>