SiteCore网站悬停下拉按钮HTML/CSS错误：多下拉同时展开修复

问题出在HTML结构的标签闭合错误：所有.dropdown容器都没有单独闭合，导致后续的下拉组件被嵌套进了前一个.dropdown内部。当鼠标悬停时，父级.dropdown的hover状态会触发所有嵌套的子下拉内容同时展开。

修复方案是给每个.dropdown容器添加闭合标签</div>，确保每个下拉组件都是独立的同级元素：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button {
  background-color: #003057;
  color: white;
  border: 2px solid #003057;
font-family: "Montserrat Light";
text-decoration: none;
}

.button:hover {
  background-color: #30CDD7;
  color: black;
border: 2px solid #30CDD7;
font-family: "Montserrat Light";
text-decoration: none;
}

.dropbtn {
border: none;
background-color: #003057;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
font-family: "Montserrat Light";
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;  
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
background-color: #003057;
  color: white;
border: none;
font-family: "Montserrat Light";
text-decoration: none;
    min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  background-color: #003057;
  color: white;
  padding: 12px 16px;
  font-family: "Montserrat Light";
text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
background-color: #30CDD7;
color: black;}

.dropdown:hover .dropdown-content {
background-color: #30CDD7;
  color: black;
border: none;
font-family: "Montserrat Light";
text-decoration: none;
  display: block;}

.dropdown:hover .dropbtn {
background-color: #30CDD7;
  color: black;
border: none;
font-family: "Montserrat Light";
text-decoration: none;
  display: block;
}
</style>
</head>
<body style="background-color:white;">

<a href="https://www.dcislibraries.com/" class="button">DCIS Libraries Home</a>

<div class="dropdown">
  <button class="dropbtn">Destiny Discover ▼</button>
  <div class="dropdown-content">
    <a href="#">Lower Primary Library</a>
    <a href="#">Main Library</a>
    <a href="#">Follett Destiny</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Further Resources ▼</button>
  <div class="dropdown-content">
    <a href="#">Guidelines</a>
    <a href="#">Subscriptions</a>
    <a href="#">Book Requests</a>
  </div>
</div>

<a href="https://www.reddotawards.com/" class="button">Red Dot Books</a>

<div class="dropdown">
  <button class="dropbtn">E-Mails ▼</button>
  <div class="dropdown-content">
    <a href="mailto:dcs.libraries@dovercourt.edu.sg?subject=ATTN:%20Lower%20Primary%20Library">Lower Primary Library</a>
    <a href="mailto:dcs.libraries@dovercourt.edu.sg?subject=ATTN:%20Main%20Library%20Primary">Main Library (Primary)</a>
    <a href="mailto:dcs.libraries@dovercourt.edu.sg?subject=ATTN:%20Main%20Library%20Secondary">Main Library Secondary</a>
  </div>
</div>

</body>
</html>

内容的提问来源于stack exchange，提问作者Shiv Walker