如何创建一个CSS（垂直）下拉菜单？ [英] How to create a CSS only (vertical) drop-down menu?
本文介绍了如何创建一个CSS（垂直）下拉菜单？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下午好，
我当前的任务是为网站创建几个样式表。其中一个网站风格要求我创建一个下拉菜单，但是我不允许改变所有的HTML代码，所以基本上我被要求创建一个下拉菜单与CSS只。
这是我必须以下拉菜单的形式显示的HTML代码：
< div id =global-nav>
< ul>
< li>< a href =＃products>产品< / a>
< ul>
< li>< a href =＃widgets>小部件< / a>< / li&
< li>< a href =＃sites> Sites< / a>< / li>
< li>< a href =＃gadgets>小工具< / a>< / li>
< / ul>
< / li>
< / ul>
well：
每个列表项之前不应该有任何点或圆圈。
我想知道是否可以使用CSS完成这个任务或不。
解决方案
水平扩展的垂直菜单
* {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 {显示：block; color：#eee; text-decoration：none; padding：10px 15px;背景：＃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;不透明度：0; transition：transform 0.2s; transform：translateX（50px）;} / * INNER UL SHOW * / nav.vertical li：hover> ul {left：100％;可见度;不透明度：1; transform：translateX（0px）;}
< nav class =vertical> < ul> < li>< a href =>首页< / a>< / li> < li>< a href =＃>产品+< / a> < ul> < li>< a href =＃>小部件< / a>< / li> < li> < a href =＃>网站+< / a> < ul> < li>< a href =＃>网站1< / a>< / li> < li>< a href =＃>网站2< / a>< / li> < / ul> < / li> < li> < a href =＃>小工具< / a> < ul> < li>< a href =＃>小工具1< / a>< / li> < li>< a href =＃>小工具2< / a>< / li> < / ul> < / li> < / ul> < / li> < li>< a href =>联系人< / a>< / li> < / ul>< / nav>
移动版）
这一款可能最适合移动设备（小屏幕CSS），否则显示/隐藏巨魔与用户体验
jsBin演示 snippet-code>
* {padding：0; margin：0;} body {font：16px / 1 sans-serif } / * VERTICAL MENU * / nav.vertical {position：relative;背景：＃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：hide;} / * 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 =＃>首页< / a>< / li> < li>< a href =＃>服务+< / a> < ul> < li>< a href =＃>服务1< / a>< / li> < li>< a href =＃>服务2< / a>< / li> < li>< a href =＃>服务3< / a>< / li> < / ul> < / li> < li>< a href =＃>产品+< / a> < ul> < li>< a href =＃>小部件< / a>< / li> < li> < a href =＃>网站+< / a> < ul> < li>< a href =＃>网站1< / a>< / li> < li>< a href =＃>网站2< / a>< / li> < / ul> < / li> < li>< a href =＃>小工具< / a> < ul> < li>< a href =＃>小工具1< / a>< / li> < li>< a href =＃>小工具2< / a>< / li> < / ul> < / li> < / ul> < / li> < li>< a href =>联系人< / a>< / li> < / ul>< / nav>
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.
Here is the HTML code I have to display in form of a drop-down menu:
<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?
解决方案
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
*{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>
这篇关于如何创建一个CSS（垂直）下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
