针对ul和li元素的下拉菜单的故障

我有这个菜单编码，我也试过其他方法，但在我看来，我有困难针对第二个ul列表和il元素显示为下拉菜单，任何人都可以看到这个代码的问题？针对ul和li元素的下拉菜单的故障

非常感谢！

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

来源

2017-02-10 Kasi Monifa

你嵌套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>

来源

2017-02-10 20:57:29

针对ul和li元素的下拉菜单的故障

回答

相关问题