如何使用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

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

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

Answer 2

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

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

警告：这仅适用于IE7+。您仍然需要适当地定位下拉列表（很可能是绝对定位）。

Answer 3

编辑：哎呀！你说的是"点击"，而不是"悬停"。不好意思。我就把它留在这里，以防它帮助其他人。

---

我这里有一个来自语义标记的纯 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 4

Swimbi应用程序生成相当干净的下拉菜单CSS代码。您可以使用该应用程序，也可以仅从演示页面复制CSS http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea

Answer 5

http://css3menu.com/下载此内容并制作自己，然后浏览代码，编辑和学习