通過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的內部ul ：

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;
}