当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title ></ title >
< style >
*{
padding: 0;
margin: 0;
list-style:none;
text-decoration: none;
}
ul{
padding:20px 0px;
width: 200px;
background:#fff;
border: 1px solid #ccc;
position: relative;
}
ul li{
height: 40px;
line-height: 40px;
padding-left:10px;
}
ul li:hover{
background: #ccc;
}
ul li a{
color: #444;
font-size: 14px;
}
/*滑动门*/
ul .div1,.div2,.div3{
position: absolute;
top:0;
left:200px;
display: none;
}
ul li:hover .div1{
display: block;
width:800px;
opacity: 1;
}
</ style >
</ head >
< body >
< div >
< ul >
< li >
< a href = "#" >手机/运营商/数码</ a >
< div class = "div1" >
</ div >
</ li >
< li >
< a href = "#" >电脑/办公</ a >
< div class = "div2" ></ div >
</ li >
< li >
< a href = "#" >家居/家具/家装</ a >
< div class = "div3" ></ div >
</ li >
< li >
< a href = "#" >男装/女装/童装</ a >
< div class = "div3" ></ div >
</ li >
</ ul >
</ div >
</ body >
</ html >
|
鼠标未滑动前
鼠标滑动时
总结:以上就是本篇文章的全部内容了,通过本篇文章的学习,希望大家能够掌握如何使用CSS实现滑动门效果
以上就是CSS如何实现滑动门效果的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css如何将图片并排
css important什么意思
html代码如何让照片变模糊
css怎么实现六边形
什么是css的行内式?
css怎么设置字体为宋体
html+css+javascript如何实现列表循环滚动
css怎么让背景图片不重复
css :not()选择器怎么用
jsp加载css失败的原因
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » CSS如何实现滑动门效果