Question

我想构建CSS下拉菜单。

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

如果您运行此示例，标题3将显示您下拉UL项目。我希望Heading 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;
}

Answer 2

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

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

}

Answer 3

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

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

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

为：

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

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

3 个答案: