这个的实现很简单，主要是: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是个伸缩对象，所以要让它脱离文档流，不是在实用时会影响到布局，给它一个绝对定位即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- JS 实现导航菜单中的二级下拉菜单的几种方式
- 基于JavaScript实现单选框下拉菜单添加文件效果
- JS模拟bootstrap下拉菜单效果实例
- 全国省市二级联动下拉菜单 js版
- JS组件Bootstrap实现下拉菜单效果代码
- 最简单js代码实现select二级联动下拉菜单
- 使用Javascript实现选择下拉菜单互移并排序
- JavaScript实现下拉菜单的显示和隐藏
- javascript手风琴下拉菜单实现代码
- JS+CSS实现的经典圆角下拉菜单效果代码
- js代码实现下拉菜单【推荐】
