下午好
我当前的任务是为网站创建多个样式表。其中一种网站样式要求我创建一个下拉菜单,但是我根本不允许更改 HTML 代码,所以基本上我被要求仅使用 CSS 创建一个类似下拉菜单的菜单。
这是我必须以下拉菜单形式显示的 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>
但是也有不同的要求: 每个列表项前不应有任何点或圆圈。
我想知道是否可以仅使用 CSS 来完成此任务。 有什么办法可以用 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{
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>
垂直菜单(仅限移动设备)
这个可能最适合移动设备(较小的屏幕 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>
关于css - 如何创建仅 CSS(垂直)下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8141513/