Html 针对下拉菜单的ul和li元素时出现问题_Html_Css

Html 针对下拉菜单的ul和li元素时出现问题

html css

Html 针对下拉菜单的ul和li元素时出现问题,html,css,Html,Css,我对这个菜单进行了编码，我也尝试过其他方法，但在我看来，我在为下拉菜单显示第二个ul列表和il元素时遇到了问题，有人能看到这个代码的问题吗非常感谢你 HTML: <!DOCTYPE html> <html> <head> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div id="na

我对这个菜单进行了编码，我也尝试过其他方法，但在我看来，我在为下拉菜单显示第二个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;
}

HTML：

关于
新闻
艺术家

卡西
罪
措辞

录像带
贮藏

CSS:
身体{
填充：0；
保证金：0；
字体大小：20px；
}
#导航{
背景色：#222；
颜色：#FFF；
}
#导航包装器{
宽度：960px；
保证金：0自动；
文本对齐：左对齐；
}
#导航ul{
列表样式类型：无；
填充：0；
保证金：0；
位置：相对位置；
}
#李国荣{
显示：内联块；
填充：5px25px；
}
#nav ul li:悬停{
颜色：#FFDF00
}
#导航ulli：悬停ul{
显示：块；
}
#导航ul{
显示：无；
位置：绝对位置；
}

您嵌套的

ul

需要在

li

中。只有

li

可以是

ul

的直接子级

然后默认情况下使用CSS隐藏嵌套的

ul

，然后当您悬停在

li

上时，显示作为直接子级的任何嵌套的

ul

ul{
显示：无；
}
李：悬停>ul{
显示：块；
}


关于
新闻
艺术家

卡西
罪
措辞


录像带
贮藏