使用css創建第二級下拉菜單

Question

我正在嘗試創建第二級下拉菜單。我成功地創建了第一級下拉菜單，但有點卡在使其級別2.請幫助我完成它..

也請解釋我什麼錯誤，我正在做，我不能得到第二級下拉即使是CSS部分是好（我這麼認爲）

編輯：我知道有很多關於下拉CSS的教程。但我想知道爲什麼這不起作用。

這裏是鏈接到jsbin

HTML

<ul id="nav"> 
    <li>Home</li> 
    <li>Details 
    <ul id="subNav"> 
    <li>x details<li> 
     <li>y details</li> 
    </ul></li> 

    <li>About Us 
    <ul id="xSubNav"> 
     <li>About company 
     <ul> 
      <li>full information</li> 
      <li>summary</li> 
     </ul></li> 
     <li>About Author</li> 
    </ul></li> 
</ul> 

CSS

*{font-family:consolas;} 

li{line-height:20px;} 

ul#nav>li{float:left;width:100px;list-style:none; 
      cursor:hand;cursor:pointer;} 

ul#nav li li 
{display:none;width:150px;} 

ul#nav li ul 
{padding:0;margin:0;} 

ul#nav>li:hover>ul>li 
{display:block;} 

ul#nav>li:hover{color:grey;} 

ul li li{color:black;} 

ul li li:hover 
{color:cornflowerblue;} 

ul li li:hover li /* level 2 dropdown part */ 
{display:block;margin-left:150px;width:300px;} 

Answer 1

這裏是你的代碼的解決方案

只需添加下面的CSS：

ul ul li { position:relative;} 
ul ul li ul { position:absolute; display:none; left:0px; top:0px;} 
ul ul li:hover ul { display:block;} 
ul#nav li li li {display:block;} 

檢查該工作fiddle

Answer 2

的問題是CSS規則的特殊性。只要將#nav添加到最後三條規則中，不要被第一條規則覆蓋。

ul#nav li li{color:black;} 

ul#nav li li:hover 
{color:cornflowerblue;} 

ul#nav li li:hover li 
{display:block;margin-left:150px;width:300px;} 

而且我認爲還需要其他一些調整，但這就是主意。