水平导航栏Dropdown菜单Hover时无法稳定显示问题求助

问题原因 #

• 无效HTML结构：在<button>标签内嵌套<a>标签不符合HTML规范，浏览器解析异常会打乱hover事件的触发逻辑，导致鼠标移动时hover状态异常中断。
• .dropdown的overflow: hidden属性：该属性会限制容器的hover判定范围，当鼠标从按钮移到绝对定位的下拉菜单时，会被判定为脱离了.dropdown的hover区域，从而触发菜单隐藏。
• 潜在间隙问题：.topnav的固定高度加上按钮的padding设置，可能导致下拉菜单与按钮之间存在微小间隙，鼠标移动时会短暂离开hover范围，引发菜单消失。

修复方案 #

第一步：修正HTML结构 #

将按钮内的<a>标签移除，改用<a>标签作为下拉按钮（更符合导航语义）：

<!DOCTYPE html>
<html lang="en">
<!-- CaseStudy_Homepage -->
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="CaseStudy.css"/>
    <title>OPE ID Lookup and FICE Crosswalk: Homepage</title>
</head>
<body>
    <div class="topnav" id="myTopnav">
        <a id="active">Home</a>
        <div class="dropdown">
            <a href="SearchMenu.html" class="dropbtn">Search Options</a>
            <div class="dropdown-content">
                <a href="Fice.html">OPE ID code by FICE code</a>
                <a href="Search.html">OPE ID code by Institutional Information</a>
                <a href="VerifySearch.html">Verify OPE ID code</a>
            </div>
        </div>
        <a href="DataDictionary.html">Data Dictionary</a>
    </div>
</body>
</html>

第二步：调整CSS样式 #

移除.dropdown的overflow: hidden，并适配下拉按钮的样式：

/* Navigation Bar */
/* Add a black background color to the top navigation */
.topnav {
  height: 48.8px;
  background-color: black;
  overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  line-height: normal;
  margin: 0;
}
/* Add an active class to highlight the current page */
#active, #active a:hover {
  background-color: inherit;
  text-decoration: underline;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  /* 移除overflow: hidden */
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 18px;
  font-weight: bold;
  border: none;
  outline: none;
  color: white;
  text-align: center;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  /* 补充样式，保持和导航链接一致 */
  display: block;
  padding: 14px 16px;
  text-decoration: none;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

修复原理 #

• 修正HTML结构后，浏览器可以正确识别hover触发区域，避免嵌套标签导致的解析异常。
• 移除overflow: hidden后，.dropdown的hover范围不再被自身高度限制，鼠标移动到下拉菜单时，.dropdown:hover状态会持续保持。
• 使用<a>标签作为下拉按钮，既符合导航语义，又保证了交互逻辑的一致性。

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