如何创建仅 CSS（垂直）下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8141513/
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 create a CSS only (vertical) drop-down menu?
提问by beta
Good afternoon,
下午好，
My current task is to create several stylesheets for a website. One of the websites styles requires me to create a drop-down menu, I however am not allowed to change the HTML code at all, so basically I'm asked to create a drop-down like menu with CSS only.
我当前的任务是为网站创建多个样式表。其中一种网站样式要求我创建一个下拉菜单，但是我根本不允许更改 HTML 代码，因此基本上我被要求仅使用 CSS 创建一个类似下拉菜单的菜单。
Here is the HTML code I have to display in form of a drop-down menu:
这是我必须以下拉菜单的形式显示的 HTML 代码：
<div id="global-nav">
<ul>
<li><a href="#products">Products</a>
<ul>
<li><a href="#widgets">Widgets</a></li>
<li><a href="#sites">Sites</a></li>
<li><a href="#gadgets">Gadgets</a></li>
</ul>
</li>
</ul>
There however are different requirements as well: There shouldn't be any dots or circles preceding each list item.
然而，也有不同的要求：每个列表项之前不应有任何点或圆圈。
I'm wondering whether it is possible to accomplish this task with CSS only or not. Is there any way I can do this with CSS?
我想知道是否可以仅使用 CSS 来完成此任务。有什么办法可以用 CSS 做到这一点吗？
回答by Roko C. Buljan
Vertical menu with horizontal expansion
水平扩展的垂直菜单
*{padding:0;margin:0;}
body{font:16px/1 sans-serif}
/*VERTICAL MENU*/
nav.vertical{
position:relative;
width:200px;
}
/* ALL UL */
nav.vertical ul{
list-style: none;
}
/* ALL LI */
nav.vertical li{
position:relative;
}
/* ALL A */
nav.vertical a{
display:block;
color:#eee;
text-decoration:none;
padding:10px 15px;
background:#667;
transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
background:#778;
}
/* INNER UL HIDE */
nav.vertical ul ul{
position:absolute;
left:0%;
top:0;
width:100%;
visibility:hidden;
opacity:0;
transition: transform 0.2s;
transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
left:100%;
visibility:visible;
opacity:1;
transform: translateX(0px);
}<nav class="vertical">
<ul>
<li><a href="">Home</a></li>
<li><a href="#">Products +</a>
<ul>
<li><a href="#">Widgets</a></li>
<li>
<a href="#">Sites +</a>
<ul>
<li><a href="#">Site 1</a></li>
<li><a href="#">Site 2</a></li>
</ul>
</li>
<li>
<a href="#">Gadgets +</a>
<ul>
<li><a href="#">Gadget 1</a></li>
<li><a href="#">Gadget 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</nav>Vertical menu (mobile only)
垂直菜单（仅限移动设备）
this one might best suit for mobile (smaller screens CSS) otherwise the show/hide would troll with User Experience
这个可能最适合移动设备（较小的屏幕 CSS），否则显示/隐藏会影响用户体验
*{padding:0;margin:0;}
body{font:16px/1 sans-serif}
/*VERTICAL MENU*/
nav.vertical{
position:relative;
background:#667;
}
/* ALL UL */
nav.vertical ul{
list-style: none;
}
/* ALL LI */
nav.vertical li{
position:relative;
}
/* ALL A */
nav.vertical a{
display:block;
color:#eee;
text-decoration:none;
padding:10px 15px;
transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
background:#778;
}
/* INNER UL HIDE */
nav.vertical ul ul{
background:rgba(0,0,0,0.1);
padding-left:20px;
transition: max-height 0.2s ease-out;
max-height:0;
overflow:hidden;
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
max-height:500px;
transition: max-height 0.25s ease-in;
}<nav class="vertical">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services +</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
</ul>
</li>
<li><a href="#">Products +</a>
<ul>
<li><a href="#">Widgets</a></li>
<li>
<a href="#">Sites +</a>
<ul>
<li><a href="#">Site 1</a></li>
<li><a href="#">Site 2</a></li>
</ul>
</li>
<li><a href="#">Gadgets +</a>
<ul>
<li><a href="#">Gadget 1</a></li>
<li><a href="#">Gadget 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</nav>回答by Mario
Just a slightly enhanced version of the great solution above.
只是上述出色解决方案的略微增强版本。
<style type="text/css">
#global-nav {
width: 121px;
float: left;
background: #e8eef4;
}
#global-subnav {
width: 121px;
background: #09C;
}
#global-nav a {
color: #034af3;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
text-indent: 10px;
text-decoration:none;
font-weight: bold;
width: 100%;
}
#global-nav ul{
background: yellow;
padding: 0;
margin: 0;
}
#global-subnav ul{
background: orangered;
position: relative;
top: -10px;
left: 40px;
}
#global-nav li{
list-style: none;
border-bottom: #5C87B2 solid;
border-width: 3px;
}
#global-nav ul ul li{
display:none;
}
#global-nav li:hover {
background: #fff;
}
#global-nav li:hover ul li{
display:block;
}
</style>
<div id="global-nav">
<ul>
<li><a href="#One">One</a>
<div id="global-subnav">
<ul>
<li><a href="#A">A</a></li>
<li><a href="#B">B</a></li>
<li><a href="#C">C</a></li>
</ul>
</div>
</li>
<li><a href="#Two">Two</a>
<div id="global-subnav">
<ul>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
</ul>
</div>
</li>
</ul>
</div>
回答by user2401766
The code is wrong on the last post.
上一个帖子的代码是错误的。
You can't have more than 1 ID with the same name in a document, so if you use the code above, you'll need to change
一个文档中不能有超过 1 个同名 ID，所以如果你使用上面的代码，你需要更改
ID="global-subnav"to class="global-subnav"
ID="global-subnav"到 class="global-subnav"
and then change the CSS from
然后将 CSS 从
#global-subnavto .global-subnav
#global-subnav到 .global-subnav
