纯css下拉菜单 无需js
时间：2021-02-01 09:58:08|栏目：JavaScript代码|点击： 次
再来个今天某人说过的例子：纯css下拉菜单：
效果图
这个的实现很简单，主要是:hover和过渡属性transition的使用。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
*{
margin: 0;
padding:0;
font-size: 16px;
font-family: "微软雅黑";
}
#container{
width: 100px;
margin: 0 auto;
text-align: center;
position: relative;
}
#container ul{
list-style: none;
}
#container span{
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
cursor: pointer;
}
#container ul{
height: 0;
width: 100px;
overflow: hidden;
transition: all 1s;
position: absolute;
top: 30px;
left: 0px;
}
#container:hover ul{
height: 330px;
}
#container ul li{
background: #eee;
margin-top: 3px;
cursor: pointer;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="container">
<span>移动</span>
<ul>
<li>这里有1</li>
<li>这里有2</li>
<li>这里有3</li>
<li>这里有4</li>
<li>这里有5</li>
<li>这里有6</li>
<li>这里有7</li>
<li>这里有8</li>
<li>这里有9</li>
<li>这里有10</li>
</ul>
</div>
</body>
</html>
因为ul是个伸缩对象，所以要让它脱离文档流，不是在实用时会影响到布局，给它一个绝对定位即可。
上一篇：React-router中结合webpack实现按需加载实例
栏 目：JavaScript代码
下一篇：js实现带缓动动画的导航栏效果
本文标题：纯css下拉菜单 无需js
本文地址：http://www.codeinn.net/misctech/55210.html
