html - 在 css/html 中创建菜单栏

Question

我正在学习 html/css，我一直在创建一个带有下拉列表的菜单栏，该菜单栏在悬停时显示。代码写在下面。问题是当我将鼠标悬停在下拉菜单上时，下拉菜单没有显示。请帮我解决问题？

CSS:

#hi{background-color:grey;}
#hi ul{color:white; list-style-type:none; position:relative; }
#hi ul li{display:inline-block;}
#hi ul li:hover {background-color:orange;}
#hi ul li:hover ul{display:block;}
#hi ul ul{display:none; position:absolute;}

代码:

<div id="hi">
<ul>
    <li>A</li>
        <ul><li>b</li>
        <li>c</li>
        <li>d</li>
        </ul>
    <li>E</li>
        <ul><li>f</li>
        <li>g</li>
        <li>h</li>
        </ul>

    <li>I</li>
        <ul><li>J</li>
        <li>k</li>
        <li>l</li>
        </ul>

</ul>   
</div>

Answer 1

你应该使用这个 HTML 结构:

<div id="hi">
      <ul>
        <li>A
          <ul>
            <li>b</li>
            <li>c</li>
            <li>d</li>
          </ul>
        </li>
        <li>E
          <ul>
            <li>f</li>
            <li>g</li>
            <li>h</li>
          </ul>
        </li>
        <li>I
          <ul>
            <li>J</li>
            <li>k</li>
            <li>l</li>
          </ul>
        </li>
      </ul>
    </div>

#hi {
  background-color: grey;
}
#hi ul {
  color: white;
  list-style-type: none;
  position: relative;
}
#hi ul li {
  display: inline-block;
}
#hi ul li:hover {
  background-color: orange;
}
#hi ul li ul {
  display: none;
  position: absolute;
}
#hi ul li:hover ul {
  display: block;
}
#hi ul li ul {
  background: black;
  padding: 2px;
}
#hi ul li ul li {
  display: block;
}

<div id="hi">
  <ul>
    <li>A
      <ul>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
    </li>
    <li>E
      <ul>
        <li>f</li>
        <li>g</li>
        <li>h</li>
      </ul>
    </li>
    <li>I
      <ul>
        <li>J</li>
        <li>k</li>
        <li>l</li>
      </ul>
    </li>
  </ul>
</div>

ul包含子菜单未使用您的 HTML 结构出现，因为您的子菜单 ul未嵌套在其父项中 <li> . <ul>包含子菜单必须是其父菜单的一部分 <li>这样当您将光标放在 <li> 上时它就会出现.