该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
/*重置所有元素的三个样式为零，一般不推荐这样使用，但是我测试一般这么写*/
* {margin:0; padding:0; border:0;}
a {text-decoration:none; color:#000;}
body {font-size:12px; font-family:"微软雅黑";}
ul,ol {list-style:none;}
ul > li { /* 选择一级菜单的li元素 */
float:left; /*让li元素排成一排*/
display:block;
width:80px; height:40px; /*设置它们的宽度和高度*/
margin-left:10px; /*设置它们左边的空隙*/
position:relative; /*设置为相对定位，这很重要*/
text-align:center; /*这两行是让里面的文字水平垂直居中对齐*/
line-height:40px;
background:-webkit-linear-gradient(top,#66ee66,#33ee33); /* 下面三行是设置背景色，没有做ff和opera的兼容 */
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="#ff66ee66",endcolorstr="#ff33ee33");
background:-ms-linear-gradient(top,#66ee66,#33ee33)
}
ol { /* 选择二级菜单 */
position:absolute; /* 设置为绝对定位，这很重要 */
top:100%; /* 设置二级菜单的顶边位于一级菜单的底部*/
display:none; /* 设置二级菜单为不可见 */
}
ol > li {/* 选择二级菜单li元素 */
width:80px;
height:30px;
text-align:center;
line-height:30px;
margin-top:5px; /* 设置二级菜单单元的顶部间隙 */
background:-webkit-linear-gradient(top,#6699ff,#3366ff);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="#ff6699ff",endcolorstr="#ff3366ff");
background:-ms-linear-gradient(top,#6699ff,#6699ff)
}
ul > li:hover > ol {display:block;} /* 设置鼠标悬停于一级菜单时，二级菜单显示 */
7719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
