0

我正在尝试创建第二级下拉列表。我成功创建了第一级下拉菜单，但在使其成为第 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;}
4

2 回答 2

2

这是您的代码的解决方案

只需添加以下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;}

检查这个工作小提琴

于 2012-12-13T07:38:04.070 回答
1

问题在于 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;}

而且我认为需要进行一些其他调整，但这就是想法。

于 2012-12-13T07:24:27.437 回答