如何仅使用 CSS 创建带有垂直子菜单的水平 HTML 菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3751998/
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 horizontal HTML menu with a vertical submenu using CSS only?
提问by sonya
I want to design a Horizontal menu and onMouseover I want a vertical submenu to appear. I surfed a lot and found out some codes ,but when I execute, in almost all the codes I get the Horizontal menu properly but the submenus dont get displayed at all.
我想设计一个水平菜单和 onMouseover 我想要一个垂直子菜单出现。我冲浪了很多，发现了一些代码，但是当我执行时，在几乎所有的代码中，我都正确地获得了水平菜单，但根本没有显示子菜单。
i am programming using ActivePerl 5.12 on Windows.
我在 Windows 上使用 ActivePerl 5.12 进行编程。
I am using IE7 for display, is that the reason why am not getting the proper result? Please do help me find the solution. Thank you.
我正在使用 IE7 进行显示，这是没有得到正确结果的原因吗？请帮我找到解决方案。谢谢你。
Here's the piece of code which i was trying to execute..
这是我试图执行的一段代码。
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
menu {
position: relative;
margin-left: 30px;
}
menu a {
display: block;
width: 140px;
}
menu ul {
list-style-type: none;
padding-top: 5px;
}
menu li {
float: left;
position: relative;
padding: 3px 0;
text-align: center;
}
menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
menu ul.sub-menu li {
text-align: left;
}
menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}
</style>
HTML Part
HTML 部分
<div id="menu">
<ul>
<li>
<a href="#">Home</a>
<ul class="sub-menu">
<li><a href="#">Pages</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">New Posts</a></li>
<li><a href="#">Recent Comments</a></li>
</ul>
</li>
<li>
<a href="#" >About</a>
<ul class="sub-menu">
<li><a href="#">Get to know us</a></li>
<li><a href="#">Find out what we do</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="sub-menu">
<li><a href="#">E-mail Us</a></li>
<li><a href="#">Use Our Contact Form</a></li>
</ul>
</li>
</ul>
</div>
回答by Spudley
Firstly, if you have a choice, upgrade to IE8. IE7 really has no reason to be in use. :-) That said, IE7 should do what you want... just be aware that it has significant missing functionality, so it might make your life harder.
首先，如果你有选择，升级到IE8。IE7真的没有理由被使用。:-) 也就是说，IE7 应该做你想做的事……只是要注意它缺少重要的功能，所以它可能会让你的生活更艰难。
Secondly, your question says you've found some 'codes' (tutorials?), but you're not getting the results you want; it would help if you told us which tutorials you've used, or at least showed us some of the code that doesn't work, and tell us what problems you've had with it.
其次，你的问题是你已经找到了一些“代码”（教程？），但是你没有得到你想要的结果；如果您告诉我们您使用了哪些教程，或者至少向我们展示了一些不起作用的代码，并告诉我们您遇到了哪些问题，这会有所帮助。
I will try to provide an answer, though...
我会尽力提供一个答案，虽然...
Your question implies that you want to write a menu that is controlled only by CSS.
您的问题意味着您想编写一个仅由 CSS 控制的菜单。
With that in mind, it doesn't really matter what language you use to generate the HTML, because your HTML should only need to consist of nested <ul>and <li>tags, with a few IDs or classes to tell your CSS where to apply its styles.
考虑到这一点，您使用哪种语言生成 HTML 并不重要，因为您的 HTML 应该只需要包含嵌套<ul>和<li>标签，以及一些 ID 或类来告诉您的 CSS 在哪里应用其样式。
From that perspective, the Perl code (or any other language) shouldn't be particularly complex. The CSS may be complex, but that would be separate from your Perl code.
从这个角度来看，Perl 代码（或任何其他语言）不应该特别复杂。CSS 可能很复杂，但这与您的 Perl 代码是分开的。
In CSS, the :hover style will allow you to build mouse-over drop-down functionality. No Perl (or Javascript) required. I'd suggest looking at the A List Apartsite; it's a good site for CSS tutorials and has some very good examples of CSS-driven menus.
在 CSS 中，:hover 样式将允许您构建鼠标悬停下拉功能。不需要 Perl（或 Javascript）。我建议查看A List Apart网站；这是一个很好的 CSS 教程站点，并且有一些非常好的 CSS 驱动菜单示例。
回答by user2161297
<html xmlns="http://www.w3.org/1999/xhtml">
CSS code
CSS代码
div {
width: 550px;
margin: 0px auto;
}
div ul li a:link, div ul li a:visited {
display: block;
background-color: #98bf21;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: Red;
text-align: center;
text-decoration: none;
padding: 4px;
border-bottom: 1px solid #fff;
width: 170px;
}
div ul li a:hover{
background-color: #030;
}
li ul li a:link, li ul li a:visited {
display: block;
background-color: #98bf21;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
color: Blue;
text-align: center;
text-decoration: none;
padding: 4px;
border-bottom: 1px solid #fff;
width: 170px;
}
li ul li a:hover {
background-color: #050;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
div ul li {
float: left;
margin-left: 5px;
}
ul li ul li {
float: none;
margin-left: 0px;
}
li ul {
display: none;
}
li:hover ul{
display: block;
}
HTML
HTML
<div>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub 4</a></li>
<li><a href="#">Sub 5</a></li>
<li><a href="#">Sub 6</a></li>
</ul>
</li>
</ul>
</div>
回答by Roman Polen.
You can use online HTML CSS horizontal and vertical menu layout generatorto create any HTML menu with up to three submenu levels using CSS only.
您可以使用在线 HTML CSS 水平和垂直菜单布局生成器，仅使用 CSS 创建最多具有三个子菜单级别的任何 HTML 菜单。
回答by Pramendra Gupta
Making menu is all about css and javascript
制作菜单都是关于 css 和 javascript
I will recommend some jquery plugin coz its clean and easy to use.
我会推荐一些 jquery 插件，因为它干净且易于使用。
see tutorial
看教程
http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
demo link
演示链接
http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
