如何創建一個垂直下拉菜單

Question

我在這裏試圖完成的是元素上的垂直下拉菜單，（ul）「fav blogs」。我試圖調整CSS，因此它只是垂直下降直接在「fav blogs」元素下的子菜單「rawrmerawr」和「realfriennds」。

無論我使用的是什麼CSS，都無法弄清楚我使用的代碼是什麼。當我將鼠標懸停在「這裏有狗屎」元素上時，它正確地將另一個（ul - 無序列表）放下，但是當我在「fav博客」上徘徊時，它不會這樣做。

您可以查看導航欄住here

一看html代碼：

<nav> 
<ul> 
    <li><a href="#">There's some shit here </a> 
     <ul> 
      <li><a href="#">fav blogs </a></li> 
       <ul> 

        <li><a href="http://rawrmerawr.tumblr.com/" target="_blank">sun&stars</a></li> 
        <li><a href="#" target="_blank">realfriennds</a></li> 

       </ul> 
      <li><a href="#">musicc</a></li> 
      <li><a href="#">only me!!</a></li> 
     </ul> 
    </li> 
</ul> 

一看CSS代碼：

nav { 
position: fixed; 
margin: 0 0 0 5px; 
} 

nav ul ul, ul ul ul li { 
display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
    margin: 0 0 0 10px; 
} 

nav ul ul ul li:hover > ul { 
    display: block; 
    margin: 0 0 20px 20px; 
} 

Answer 1

您的HTML結構不正確。該<ul>的子菜單應嵌套在<li>內爲fav blogs這樣的：

<nav> 
<ul> 
    <li><a href="#">There's some shit here </a> 
     <ul> 
      <li><a href="#">fav blogs </a> 
        <ul> 
        <li><a href="http://rawrmerawr.tumblr.com/" target="_blank">sun&stars</a></li> 
        <li><a href="#" target="_blank">realfriennds</a></li> 
        </ul> 
      </li> 
      <li><a href="#">musicc</a></li> 
      <li><a href="#">only me!!</a></li> 
     </ul> 
    </li> 
</ul> 
</nav> 

這個CSS：

nav { 
    position: fixed; 
    margin: 0 0 0 5px; 
} 

nav>ul>li>ul>li:hover>ul { 
     display: block; 
     position: absolute; 
     margin-left: 50px; 
     margin-top: -12px; 
} 

nav>ul>li>ul { 
     display: none; 
} 

nav>ul>li>ul>li>ul { 
     display: none; 
} 

nav>ul>li:hover>ul { 
     display: block; 
     margin: 0 0 0 10px; 
}