导航栏Store标签hover时下拉菜单不显示、位置错位问题求助

问题原因 #

你遇到的两个问题都来自代码里的基础错误：

1. HTML结构错误：Store对应的下拉菜单<ul class="drop-nav">现在和Store的<li>标签平级，不是Store<li>的子元素，所以nav ul li:hover ul的选择器完全匹配不到元素，hover自然没有反应。
2. 定位规则缺失：子菜单用了绝对定位，但没有给父级<li>设置相对定位，也没有给子菜单设置偏移量，导致子菜单默认相对于最外层的导航容器左上角定位，就会覆盖开头的Home、About标签。

修复步骤 #

第一步：修正HTML结构 #

将.drop-nav的ul整体移动到Store对应<li>的内部，修改后的代码如下：

<nav>
  <label for="show-menu" class="show-menu"><img src="hamburger-red.png" alt="Hamburger Icon" style="position: relative; top: .25em;"></label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="index.html" class="active-link">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="programs.html">Programs</a></li>
    <li><a href="why-equine.html">Why Equine</a></li>
    <li><a href="our-horses.html">Our Horses</a></li>
    <li><a href="benefits.html">Benefits</a></li>
    <!-- 修正Store的li结构，把下拉菜单放到li内部 -->
    <li>
      <a href="store.html">Store</a>
      <ul class="drop-nav">
        <li><a href="horse-store.html" target="_blank">Horse Health Store</a></li>
        <li><a href="people-store.html">People Store</a></li>
      </ul>
    </li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

第二步：修正CSS规则 #

在原有CSS基础上做两处修改：

1. 给nav ul li添加position: relative，作为子菜单的定位参考
2. 给nav ul ul添加top: 100%; left: 0;，让子菜单固定出现在父级li的正下方，可选添加白色背景避免文字看不清

修改后的相关CSS片段：

/* 给li加相对定位 */
nav ul li {
  position: relative;
  /* 保留原有其他属性不变 */
  background-color: #373945;
  width: 12.5%;
  height: 2em;
  border-right: 1px solid #ABACAF;
  display: inline-block;
  float: left;
  /* 剩下原有属性不用改 */
}

/* 给子菜单加偏移和背景 */
nav ul ul {
  padding: 0; 
  position: absolute;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  top: 100%;
  left: 0;
  background: #fff; /* 可选添加，避免子菜单文字和背景重叠看不清 */
  transition: all .25s ease-in;
  /* 保留原有其他属性不变 */
}

修改完成后hover Store就能正常触发下拉，且下拉菜单会出现在Store标签的正下方，不会覆盖其他导航项。

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