html 二级菜单hover,利用:hover伪类制作二级导航菜单

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

/*重置所有元素的三个样式为零，一般不推荐这样使用，但是我测试一般这么写*/

* {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;} /* 设置鼠标悬停于一级菜单时，二级菜单显示 */

• CSS
  1. 选择器
  2. 伪类
  3. 动画
  4. 布局
• HTML
  1. 多媒体
  2. 表单
  3. 文档类型
  4. DOM
• XML
  1. DOM
  2. 解析
  3. 样式
  4. Ajax
• javascript
  1. 操作DOM
  2. Ajax
  3. 原型继承
  4. 闭包