Question

我有这个菜单编码，我也尝试了其他方法，但在我看来，我无法针对下拉菜单显示第二个ul列表和il元素，任何人都可以看到问题这段代码？

非常感谢你！

HTML:
<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" type="text/css" rel="stylesheet">

  </head>

  <body>
    <div id="nav">
        <div id="wrapper">
          <ul>
            <li>About</li>
            <li>News</li>
            <li>Artists</li>
              <ul>
                <li>Kasi</li>
                <li>Sin</li>
                <li>WORDUP</li>
              </ul>
            <li>Videos</li>
            <li>Store</li>
          </ul>
        </div>
      </div>
  </body>
</html>

CSS:

body {
  padding: 0;
  margin: 0;
  font-size: 20px;

}

#nav {
  background-color: #222;
  color: #FFF;
}

#nav_wrapper {
  width: 960px;
  margin: 0 auto;
  text-align: left;
}

#nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

#nav ul li {
  display: inline-block;
  padding: 5px 25px;
}

#nav ul li:hover{
  color: #FFDF00
}

#nav ul li:hover ul{
  display: block;
}

#nav ul ul{
  display: none;
  position: absolute;
}

Answer 1

您的嵌套ul需要位于li。只有li可以是ul的直接子女。

然后默认使用CSS隐藏嵌套的ul，然后当您悬停li时，显示任何直接子级的嵌套ul。

＆＃13;

ul ul {
  display: none;
}
li:hover > ul {
  display: block;
}

＆＃13;

<ul>
  <li>About</li>
  <li>News</li>
  <li>Artists
    <ul>
      <li>Kasi</li>
      <li>Sin</li>
      <li>WORDUP</li>
    </ul>
  </li>
  <li>Videos</li>
  <li>Store</li>
</ul>

＆＃13;

无法针对下拉菜单定位ul和li元素

1 个答案: