通过 UL 中的 CSS 选择器显示 Div答案

【问题标题】：Showing Div via CSS selector within a UL通过 UL 中的 CSS 选择器显示 Div
【发布时间】：2011-01-19 22:10:51
【问题描述】：

我想构建 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>

【问题讨论】：

标签： html css-selectors css

【解决方案1】：

去掉 > 组合子，这样内部的 uls 就会被拾取，无论它们是否在包含 div 中：

li:hover ul {
    display: block;
}

【讨论】：

【解决方案2】：

如果您的规则中需要>，请更改此规则：

li:hover > div ul, li:hover > ul {
display: block;

}

【讨论】：

你说得对，下面的顶级li 确实被推倒了。但这将是一个完全不同的问题：/
感谢博尔特和马特。 div ul 是我一直在寻找的。有用。再次感谢。

【解决方案3】：

您的问题是由于您的 css，div 显示在 :hover 上，但内部 ul 没有。

所以你可以使用@BoltClock 的解决方案或更改：

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

到：

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

【讨论】：