如何使用CSS导航创建子菜单？

Question

我想创建一个带有子菜单的CSS导航，单击标题选项卡时会出现这些子菜单。下面是我希望看到的HTML示例：

<ul id="menu">
<li id="nav-1"><a href="home.php">Home</a></li>
<li id="nav-2"><a href="#">Menu 1</a>
<ul id="subnav-2">
  <li><a href="page1">Page 1</a></li>
  <li><a href="page2">Page 2</a></li>
  <li><a href="page3">Page 3</a></li>
</ul>
</li>
<li id="nav-3"><a href="#">Menu 2</a>
<ul id="subnav-3">
  <li><a href="page1">page 1</a></li>
  <li><a href="page2">page 2</a></li>
  <li><a href="page3">page 3</a></li>
</ul>
</li>
  <li id="nav-4"><a href="crickets.php">Other tab without submenu</a>
  </li>
</ul>

我似乎在网上找不到任何东西来做这件事。有什么想法吗？

Answer 1

如果您不介意使用库，我建议您使用bootstrap。它使得创建带有下拉子菜单的菜单变得非常容易，而且它带有一个非常整洁的默认样式。你应该看看这个：

http://twitter.github.com/bootstrap/javascript.html#dropdowns

Answer 2

编辑：哇！你说的是“点击”，不是“悬停”。抱歉的。我就把这个留在这里，以防对别人有帮助。

我这里有一个来自语义标记的纯CSS分层菜单的四种技术的例子：

http://phrogz.net/JS/ul2menu/purecss_testsuite.html

下面是一个单一技术的示例：

http://jsfiddle.net/FX4Dz/1/

<nav><ul>
  <li>Header 1<ul>
    <li class="sub">Subhead 1.1<ul>
      <li>Subhead 1.1.1</li>
      <li>Subhead 1.1.2</li>
    </ul></li>
    <li>Subhead 1.2</li>
    <li>Subhead 1.3</li>
  </ul></li>
  <li>Header 2<ul>
    <li>Subhead 2.1</li>
    <li class="sub">Subhead 2.2<ul>
      <li>Subhead 2.2.1</li>
    </ul></li>
  </ul></li>
</ul></nav>​

nav li       {
    display:inline-block;
    padding:0 0.4em;
    height:1.4em; line-height:1.4em;
    position:relative;
}

nav li ul         { display:none }
nav li li         { display:block; width:8em }
nav li:hover > ul {
  display:block;
  position:absolute;
  top:1.4em; left:-1px; /* align with respect to horizontal row */
  width:8em; z-index:2
}
nav li li:hover ul {
  left:8em; top:-1px    /* subnav menus align next to their menu item */
}

Answer 3

如果你需要点击的话，你需要javascript。如果您可以在鼠标悬停时执行此操作，则可以执行以下操作：

#menu ul{
 dispaly: none;
}

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

注意事项:这只适用于IE7+。您还需要适当地定位下拉列表(最有可能的是绝对定位)。