針對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元素的下拉菜單的故障

回答

相關問題