纯CSS3制作二级菜单特效
基础掌握知识：1.boder-radis圆角的制作 2.linear-gradient渐变背景的制作 3.box-shadow阴影效果的制作 4.transition转换效果的制作 5.transparent透明效果 6.CCS3中before的作用
搭建HTML容器
一级菜单ul的样式修饰：
设置一级菜单的宽度、整体居中显示、用border设置颜色为#222的1像素宽的边框、用background-color设置背景颜色为#111、用background-image和linear-gradient设置背景图片为#444和#111的渐变效果、用border-radius设置圆角边框为6px、用before和after的方式给一级ul填充内容是清除二级浮动的一种方式保证背景能够包裹所有ul内的元素
.top-nav{width:969px;margin:60px auto;border:1px solid #222;background-color:#111;
background-image:linear-gradient(#444,#111);border-radius:6px;box-shadow:0 1px 1px #777;
padding:0;list-style:none;}
.top-nav:before,.top-nav:after{content: "";display: table;}
.top-nav:after{clear: both;}
一级菜单内li的样式修饰：
用float将所有的li左浮动、用boder-right给每一个li制作一个左边框效果、用box-shadow制作阴影效果、position：relative是为了下面二级菜单的显示二级菜单会以absolute的方式定位
.top-nav li{float: left;border-r
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
