Html 如何使用 CSS 导航创建子菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10148400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I create a submenu with CSS navigation?
提问by bradm
I want to create a CSS navigation with submenus that appear when the heading tab is clicked. Here's example HTML of how I'd like to see it work:
我想创建一个 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>
I can't seem to find anything online to make this work. Any ideas?
我似乎无法在网上找到任何东西来完成这项工作。有任何想法吗？
回答by txominpelu
If you don't mind using libraries I would recommend using bootstrap. It makes really easy creating menus with drop-down submenus and it comes with a default style that is quite neat. You should have a look at this:
如果您不介意使用库，我建议您使用bootstrap。它使创建带有下拉子菜单的菜单变得非常容易，并且带有非常整洁的默认样式。你应该看看这个：
http://twitter.github.com/bootstrap/javascript.html#dropdowns
http://twitter.github.com/bootstrap/javascript.html#dropdowns
回答by Phrogz
Edit: Whoops! You said "click", not "hover". Sorry. I'll just leave this here in case it helps someone else.
编辑：哎呀！你说的是“点击”，而不是“悬停”。对不起。我会把它留在这里，以防它对其他人有帮助。
I have an example of four techniques for pure CSS hierarchical menus from semantic markup here:
http://phrogz.net/JS/ul2menu/purecss_testsuite.html
我有一个来自语义标记的纯 CSS 分层菜单的四种技术示例：http:
//phrogz.net/JS/ul2menu/purecss_testsuite.html
Here's an example of a single technique:
http://jsfiddle.net/FX4Dz/1/
这是单一技术的示例：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 */
}
回答by idrumgood
If you need to do it on click, you'll need javascript. If you're ok with doing it on hover, you can do this:
如果您需要在点击时执行此操作，则需要使用 javascript。如果您可以在悬停时执行此操作，则可以执行以下操作：
#menu ul{
dispaly: none;
}
#menu > li:hover ul{
display: block;
}
Caveats: this will only work in IE7+. You'll also still need to position the dropdowns appropriately (absolute positioning, most likely).
注意事项：这只适用于 IE7+。您还需要适当地定位下拉菜单（绝对定位，最有可能）。
回答by dmpost
The Swimbi appgenerates 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
该Swimbi应用产生下拉菜单中的相当干净的CSS代码。您可以使用该应用程序或从演示页面复制 CSS http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea
回答by squarephoenix
http://css3menu.com/Download this and make yourself one, then go through the code, edit, and learn
http://css3menu.com/下载并制作一个，然后通过代码、编辑和学习
