目录
一，什么是滑动门？
二，html骨架
三，css内部样式
四，效果图
一，什么是滑动门？
可以理解为一个css特效，当鼠标hover到选择的项目时，会自动滑出该项目的详细内容。这是我从其他地方学习的，分享给大家。
二，html骨架
<body><div class="slide"><ul><li><a href="#">电视</a><span></span><div class="slide-list">1</div></li><li><a href="#">手机</a><span></span><div class="slide-list">2</div></li></ul></div></body>
三，css内部样式
<style>* {margin: 0;padding: 0;}.slide {width: 234px;height: 420px;background-color: rgba(105, 101, 101, 0.6);padding: 20px 0;margin: 100px;position: absolute;}.slide ul {list-style: none;}.slide ul li {width: 100%;height: 42px;line-height: 42px;text-align: left;padding-left: 30px;box-sizing: border-box;}.slide ul li:hover {background-color: aqua;}.slide ul li a {display: inline-block;text-decoration: none;color: #fff;}.slide-list {width: 992px;height: 460px;background-color: bisque;position: absolute;top: 0;left: 234px;border: 1px solid red;box-sizing: border-box;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);display: none;}.slide ul li:hover>.slide-list {display: block;}</style>
