Html 如何在css中编写下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4861793/
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 to code a drop down menu in css?
提问by Haxed
I have coded a horizontal navigation as shown below.
我编写了如下所示的水平导航。
But I am having a hard time trying to code a drop down menu for it.
但是我很难为它编写一个下拉菜单。
If someone can help me with coding a plain simple drop down menu below Rentals(highlight in the navigation bar in sea blue), I can improve on that.
如果有人可以帮助我在Rentals下编写一个简单的下拉菜单（在导航栏中以海蓝色突出显示），我可以改进。
Thanks
谢谢
Here is my current html file:
这是我当前的 html 文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<ul class="glossymenu">
<li class="separator"><a href="#"><b>Reservations</b></a></li>
/* Added for the drop down */
<ul class="child">
<li><a href="#"><b>New Reservation</b></a></li>
<li><a href="#"><b>Search Reservation</b></a></li>
<li><a href="#"><b>Search Customer</b></a></li>
<li><a href="#"><b>Search Vehicle</b></a></li>
</ul>
<li class="separator"><a href="#"><b>Rentals</b></a></li>
<li class="separator"><a href="#"><b>Tariffs</b></a></li>
<li class="separator"><a href="#"><b>Fleet</b></a></li>
<li class="separator"><a href="#"><b>Tools</b></a></li>
<li class="separator"><a href="#"><b>Reports</b></a></li>
<li class="separator"><a href="#"><b>System Management</b></a></li>
</ul>
</body>
Here is my css code:
这是我的 css 代码：
.glossymenu{
padding: 0 0 0 0px;
margin: 0 auto 0 auto;
background: url(../images/menur_bg.gif) repeat-x;
height: 36px;
list-style: none;
border:solid 1px #CCC;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
height: 36px;
line-height: 36px;
text-align: center;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
}
.glossymenu li a b{
float: left;
display:block;
padding: 0 28px 0 8px;
}
.glossymenu li a:hover{
color: #fff;
background: url(../images/menur_hover_left.gif) no-repeat;
background-position: left bottom;;
}
.glossymenu li a:hover b{
color: #fff;
background-image: url(../images/menur_hover_right.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
.glossymenu li.separator {
background:url(../images/separator.gif) no-repeat;
background-position:right;
padding: 0 5px 0 3.5px;
}
/* Added for the drop down */
.glossymenu .child {
position:absolute;
visibility:hidden;
top:100px;
}
.glossymenu ul li:hover {
visibility:visible;
z-index:9999;
}
采纳答案by Clyde Lobo
Do you want something like http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
你想要像http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm这样的东西吗 ？
Added:
补充：
Some css based menus
一些基于 css 的菜单
http://purecssmenu.com/-- guess you can generate the css
http://purecssmenu.com/——猜你可以生成css
http://cssmenumaker.com/drop_down_css_menu.php
http://cssmenumaker.com/drop_down_css_menu.php
回答by Chugworth
in your example i can not see where you set on hover the Second-Level to "display:block". Here is a simple example for CSS-Dropdown-Menu.
在您的示例中，我看不到您将二级悬停设置为“显示：块”的位置。这是 CSS-Dropdown-Menu 的一个简单示例。
HTML:
HTML：
<ul class="topLevel">
<li><a href="#">Car</a>
<ul class="secondLevel">
<li><a href="#">Car1</a></li>
<li><a href="#">Car2</a></li>
<li><a href="#">Car3</a></li>
</ul>
</li>
</ul>
CSS:
CSS：
.secondLevel{display:none;}
.topLevel:hover ul{display:block;}
