鼠标悬停.dropdown菜单时，.dropdownBox子菜单无法显示的技术求助

问题概述 #

你编写了以下CSS代码，希望实现鼠标悬停带有.dropdown类的"Work"菜单项时，显示.dropdownBox类的子菜单，但当前效果未生效：

.dropdownBox {
  display: none;
}

.dropdown li:hover > ul.dropdownBox {
  display: block;
}

对应的HTML结构如下：

<nav class="screen2_menu_container">
  <label for="screen2_menu_check" class="screen2_menu_btn">
    <!-- checkbox to track when the hamburger menu is clicked on -->
    <input type="checkbox" id="screen2_menu_check" class="screen2_input" />

    <!-- the hamburger menu -->
    <div class="screen2_menu_hamburger"></div>

    <!-- menu items -->
    <ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
      <a href="CONTACT-US" rel="history"><span>&gt; CONTACT</span></a>
    </ul>
    <ul
      id="screen2_menu_items_Nav"
      class="screen2_menu_items navPositionLeft"
    >
      <li>
        <a href="HOME" rel="history"><span>&gt; HOME</span></a>
      </li>
      <li class="dropdown">
        <a href="WORK"><span>&gt; WORK</span></a>
      </li>
      <ul class="dropdownBox">
        <li>
          <a href="WORK-1"><span>WORK-1</span></a>
        </li>
        <li>
          <a href="WORK-2"><span>WORK-2</span></a>
        </li>
        <li>
          <a href="WORK-3"><span>WORK-3</span></a>
        </li>
        </ul>
      <li>
        <a href="REEL"><span>&gt; REEL</span></a>
      </li>
      <li class="hideDiv">
        <a href="CONTACT-US" rel="history"><span>&gt; CONTACT</span></a>
      </li>
    </ul>
  </label>
</nav>

问题根源 #

1. HTML结构错误：.dropdownBox是.dropdown的同级元素（同属父ul的子元素），但你的CSS逻辑是将其作为.dropdown的子元素来控制，结构不匹配导致选择器无法命中目标。
2. CSS选择器错误：原选择器.dropdown li:hover > ul.dropdownBox的逻辑是“选中.dropdown下的li元素悬停时的直接子元素ul.dropdownBox”，但实际.dropdown本身就是li元素，且.dropdownBox不在它内部，完全不符合当前DOM结构。

修复方案 #

步骤1：调整HTML结构 #

将.dropdownBox移动到带有.dropdown类的li内部，使其成为该li的直接子元素，符合下拉菜单的嵌套结构：

<li class="dropdown">
  <a href="WORK"><span>&gt; WORK</span></a>
  <!-- 将dropdownBox移入dropdown的li内部 -->
  <ul class="dropdownBox">
    <li>
      <a href="WORK-1"><span>WORK-1</span></a>
    </li>
    <li>
      <a href="WORK-2"><span>WORK-2</span></a>
    </li>
    <li>
      <a href="WORK-3"><span>WORK-3</span></a>
    </li>
  </ul>
</li>

步骤2：修正CSS选择器 #

调整选择器，匹配修正后的DOM结构，当.dropdown元素悬停时，显示它的直接子元素.dropdownBox：

.dropdownBox {
  display: none;
}

/* 修正选择器：选中.dropdown悬停时的直接子元素.dropdownBox */
.dropdown:hover > .dropdownBox {
  display: block;
}

如果需要兼容更复杂的嵌套场景，也可以使用后代选择器（去掉>）：

.dropdown:hover .dropdownBox {
  display: block;
}

完整可运行代码示例 #

<nav class="screen2_menu_container">
  <label for="screen2_menu_check" class="screen2_menu_btn">
    <input type="checkbox" id="screen2_menu_check" class="screen2_input" />
    <div class="screen2_menu_hamburger"></div>
    <ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
      <a href="CONTACT-US" rel="history"><span>&gt; CONTACT</span></a>
    </ul>
    <ul id="screen2_menu_items_Nav" class="screen2_menu_items navPositionLeft">
      <li>
        <a href="HOME" rel="history"><span>&gt; HOME</span></a>
      </li>
      <li class="dropdown">
        <a href="WORK"><span>&gt; WORK</span></a>
        <ul class="dropdownBox">
          <li>
            <a href="WORK-1"><span>WORK-1</span></a>
          </li>
          <li>
            <a href="WORK-2"><span>WORK-2</span></a>
          </li>
          <li>
            <a href="WORK-3"><span>WORK-3</span></a>
          </li>
        </ul>
      </li>
      <li>
        <a href="REEL"><span>&gt; REEL</span></a>
      </li>
      <li class="hideDiv">
        <a href="CONTACT-US" rel="history"><span>&gt; CONTACT</span></a>
      </li>
    </ul>
  </label>
</nav>

<style>
.dropdownBox {
  display: none;
}

.dropdown:hover > .dropdownBox {
  display: block;
}
</style>

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