html - 在 UL 中通过 CSS 选择器显示 Div

Question

我想构建 CSS 下拉菜单。

我想解决 UL 中下拉项太长的问题。所以我想在 UL 中使用 DIV。

如果运行此示例，标题 3 将显示下拉 UL 元素。我希望标题 2 链接也一样。因为我把那个 UL 放在一个 DIV 中。那我该怎么做呢？

CSS 代码:

li{
    list-style: none;
    float: left;    
}

li ul {
    display: none;
    background-color: #69f;
}

li:hover > div#mDiv {
    display: block;
}

.menuDiv{
    display: none;
}

li:hover > ul {
    display: block;
}

标记:

<ul>
  <li><a href="#">Heading 1</a></li>
  <li><a href="#">Heading 2</a>
    <div class = "menuDiv" id = "mDiv">
        <ul>
          <li><a href="#">Subitem 1</a></li>
          <li><a href="#">Subitem 2</a></li>
          <li><a href="#">Subitem 3</a></li>
        </ul>
    </div>
  </li>
  <li><a href="#">Heading 3</a>
    <ul>
      <li><a href="#">Subitem 4</a></li>
      <li><a href="#">Subitem 5</a></li>
      <li><a href="#">Subitem 6</a></li>
    </ul>
  </li>
  </ul>

Answer 1

去掉 > 组合器，这样内部 ul 就会被拾取，无论它们是否在包含 div 中:

li:hover ul {
    display: block;
}