HTML+CSS实现下拉三级菜单.pdfVIP

HTML+CSS实现下拉三级菜单

代码如下：

!DOCTYPEhtml

htmllang=en

head

metacharset=UT-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

metahttp-equiv=X-UA-Compatiblecontent=ie=edge

title下拉菜单/title

/head

style

/*重置浏览器默认样式*/

*{

padding:0;

margin:0;

font-family:MicrosoftYaHei;

list-style:none;

}

#main{

width:100%;

background:#3c3c3c;

}

/*清楚浮动，使div盒⼦能被起来*/

.clearfix:after{

content:;

display:block;

height:0;

visibility:hidden;

overflow:hidden;

clear:both;

}

.menu{

position:relative;

margin-left:8%;

}

/*每⼀个li标签的样式*/

.menuli{

width:130px;

height:40px;

/*⾏内⾼度*/

line-height:40px;

/*⽂字居中*/

text-align:center;

margin-left:4%;

}

.menulia{

text-decoration:none;

color:#2aabd2;

}

.menuli{

/*让⼀级菜单的li浮动*/

float:left;

}

/*⼆级菜单样式*/

/*⼆级菜单样式*/

.second-menu{

/*将⼆级菜单隐藏*/

display:none;

position:absolute;

}

/*hover属性，⿏标移动到li标签上触发，将对应li标签的⽿机菜单显⽰，移开后恢复到原来样式*/

.menuli:hoverul{

display:block;

}

.second-menulia{

color:#0c0c0c;

}

.second-menu{

background:#5a5959;

}

/*三级标签样式*/

.third-menu{

display:none;

background:#5a5959;

position:absolute;

/*相对于其⽗标签（⼆级标签）进⾏绝对定位*/

margin-left:125px;

margin-top:-40px;

}

/*三级菜单下的a标签⽂字颜⾊*/

.t