带有垂直子菜单的水平菜单（仅限 HTML/CSS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21997728/
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
Horizontal Menu with Vertical Submenu (HTML/CSS Only)
提问by Batsu
I'm having a difficult time trying to make my submenu vertical instead of horizontal. Any help would be much appreciated.
我很难让我的子菜单垂直而不是水平。任何帮助将非常感激。
HTML:
HTML：
<ul id="menu">
<li><a href="/" title="HOME">HOME</a></li>
<li>
<a href="/" title="ECO ENERGY">ECO ENERGY</a>
<ul>
<li><a href="/Evaluations" title="Evaluations">Evaluations</a></li>
<li><a href="/Incentives" title="Incentives">Incentives</a></li>
<li><a href="/HouseFiles" title="House Files">House Files</a></li>
<li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a>/li>
</ul>
</li>
<li>
<a href="/" title="NEW HOMES">NEW HOMES</a>
<ul>
<li><a href="/NH" title="Evaluations">Evaluations</a></li>
</ul>
</li>
</ul>
CSS:
CSS：
#menu {
background-color: #206676;
float: left;
width: 100%;
height: 60px;
}
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: left;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
float: left;
}
ul#menu li a {
background: none;
color: #FFF;
text-decoration: none;
}
ul#menu li a:hover {
color: #FFF;
text-decoration: none;
}
ul#menu ul {
display: none;
}
ul#menu li {
display: inline;
}
ul#menu li:hover ul {
display: block;
}
ul#menu li:hover ul li a {
display: block;
color: red;
}
I have it to the point where I can toggle the colour when hovered over the main menu items, but just can't get them vertical.
当鼠标悬停在主菜单项上时，我可以切换颜色，但无法使它们垂直。
采纳答案by sinisake
ul#menu ul
{
display:none;
position:absolute;
left:0;
top:20px;
}
ul#menu li
{
display:block;
}
Most important changes. JSFIDDLE> http://jsfiddle.net/LSbvJ/(You will have to tweak paddings, margins, text-align... but this is good start, I hope.)
最重要的变化。JSFIDDLE> http://jsfiddle.net/LSbvJ/（您将不得不调整内边距、边距、文本对齐……但我希望这是一个好的开始。）
回答by Kheema Pandey
Just try this updated CSS.
试试这个更新的 CSS。
ul#menu li:hover ul {
display: block;
position: absolute;
top: 10x;
width: 200px;
}
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: left;
position: relative
}
Below is a working Demo.
http://jsbin.com/buculimi/1/edit
下面是一个工作演示。
http://jsbin.com/buculimi/1/edit
回答by deepika
#menu {
background-color: #206676;
float: left;
width: 100%;
height: 60px;
}
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: left;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
float: left;
}
ul#menu li a {
background: none;
color: #FFF;
text-decoration: none;
}
ul#menu li a:hover {
color: #FFF;
text-decoration: none;
}
ul#menu ul {
display: none;
}
ul#menu li {
display: block;
}
ul#menu li:hover ul {
display: block;
position: absolute;
width: 50px;
}
ul#menu li:hover ul li a {
display: block;
color: red;
}<ul id="menu">
<li><a href="/" title="HOME">HOME</a>
</li>
<li><a href="/" title="ECO ENERGY">ECO ENERGY</a>
<ul>
<li><a href="/Evaluations" title="Evaluations">Evaluations</a>
</li>
<li><a href="/Incentives" title="Incentives">Incentives</a>
</li>
<li><a href="/HouseFiles" title="House Files">House Files</a>
</li>
<li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a>/li>
</ul>
</li>
<li><a href="/" title="NEW HOMES">NEW HOMES</a>
<ul>
<li><a href="/NH" title="Evaluations">Evaluations</a>
</li>
</ul>
</li>
</ul>回答by jigsaw
<html>
<head>
<style type="text/css" media="screen">
#menu{
width:100%;
display:block;
position:relative;
height:60px;
color:#fff;
text-decoration:none;
border-style:inset;
}
#menu a{
text-decoration:none;
color:#fff;
}
#menu ul {
padding:1; margin:1; list-style:none;font-size: 1.3em;
font-weight: 600;
}
#menu li {
float:left; position:relative; padding-right:100; display:block;
border:none;
}
#menu li ul {
display:none;
position:absolute;
}
#menu li:hover ul{
display:block;
background:red;
height:auto; width:8em;
}
#menu li ul li{
clear:both;
border-style:none;
}
</style>
</head>
<body>
<div style="background-color:#206676;;width:100%;">
<div id="menu">
<ul>
<li><a href="#" title="HOME">HOME</a></li>
<li>
<a href="#" title="ECO ENERGY">ECO ENERGY</a>
<ul>
<li><a href="/Evaluations" title="Evaluations">Evaluations</a></li>
<li><a href="/Incentives" title="Incentives">Incentives</a></li>
<li><a href="/HouseFiles" title="House Files">House Files</a></li>
<li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a></li>
</ul>
</li>
<li><a href="/" title="NEW HOMES">NEW HOMES</a>
<ul>
<li><a href="/NH" title="Evaluations">Evaluations</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
This page might help you as well: http://mrbool.com/how-to-create-menu-with-submenu-using-csshtml/26146
此页面也可能对您有所帮助：http: //mrbool.com/how-to-create-menu-with-submenu-using-csshtml/26146
