0

我想创建一个 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>

我似乎无法在网上找到任何东西来完成这项工作。有任何想法吗？

4

5 回答 5

1

The Swimbi app generates rather clean CSS code of drop down menu. You can use the app or just copy the CSS from the demo page http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea

于 2014-02-03T09:20:37.607 回答
1

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

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

于 2012-04-13T21:27:46.867 回答
1

编辑：哎呀！你说的是“点击”，而不是“悬停”。对不起。我会把它留在这里，以防它帮助别人。

我在这里有一个来自语义标记的纯 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 */
}
于 2012-04-13T21:29:41.577 回答
1

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

#menu ul{
 dispaly: none;
}

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

警告：这只适用于 IE7+。您还需要适当地定位下拉菜单（绝对定位，最有可能）。

于 2012-04-13T21:29:50.483 回答
0

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

于 2012-04-13T21:29:58.680 回答