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

而且我认为还需要其他一些调整，但这就是主意。