為什么這些div總是重疊顯示？

當您懸停時，我正在嘗試制作帶有下拉選單的導航欄。我是從 w3schools.com 獲得的，但我希望多個下拉選單彼此相鄰。我有兩個彼此相鄰，但是當我將滑鼠懸停在其中一個上時，它會顯示相同的下拉選單。我該如何解決？抱歉，如果這看起來很明顯，我是初學者。繼承人的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>

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

uj5u.com熱心網友回復：

您在配對 div 標簽時遇到了一個簡單的錯誤。

像這樣修復您的代碼，它應該可以作業：

 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>

uj5u.com熱心網友回復：

我認為這是由于您的下拉 div 標簽未正確關閉

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

標籤：

上一篇：如何將多個網址重定向到同一個網址

下一篇：影像未按比例縮小/放大