html导航二级下拉菜单代码,纯CSS实现超简单的二级下拉导航菜单代码

* {

margin:0;

padding:0;

}

body {

padding:15px;

}

.nav li li a {

display:inline-block;

}

.nav li li a {

display:block;

}

.nav ul {

list-style-type:none;

margin:0;

padding:0;

}

.nav ul li {

float:left;

line-height:24px;

display:block;

border-bottom:dashed #ccc 1px;

font-size:0;

padding:0;

margin:0;

width:120px;

}

.nav ul li a {

display:block;

width:120px;

height:24px;

font-size:12px;

text-align:center;

color:#555;

text-decoration:none;

background:#f7f7f7;

}

.nav ul table {

width:100%;

border-collapse:collapse;

border:0;

padding:0;

margin:0;

}

.nav ul li ul {

display:none;

}

.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {

color:red;

background-color:#f1f1f1;

}

.nav ul li:hover ul,.nav ul li a:hover ul,.nav ul li a:active ul {

display:block;

width:100%;

}

.nav ul ul li {

display:block;

width:100%;

border:none;

}

.nav ul ul li a {

display:block;

color:blue;

border:none;

}