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 +。您还需要适当地定位下拉列表（绝对定位，最有可能）。

Answer 4

Swimbi app生成相当简洁的下拉菜单CSS代码。您可以使用该应用或只是从演示页面http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea

复制CSS

Answer 5

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

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

5 个答案: