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>

＆＃13;

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

＆＃13;

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

＆＃13;

包含子菜单的ul未使用您的HTML结构显示，因为您的子菜单ul未嵌套在其父<li>内。包含子菜单的<ul>必须是其父<li>的一部分，以便在您将光标放在<li>上时显示。

在css / html中创建菜单栏

1 个答案: