無法確定下拉菜單的ul和li元素

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 。

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

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

無法確定下拉菜單的ul和li元素

問題描述

1 個解決方案

解決方案1
0 2017-02-10 20:57:29

無法確定下拉菜單的ul和li元素

問題描述

1 個解決方案

解決方案1 0 2017-02-10 20:57:29

解決方案1
0 2017-02-10 20:57:29