<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no">
<title>CSS3树形菜单</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: #eee;font-size: 14px;font-family: "微软雅黑";}
ul, li{list-style: none;}
a{color: #fff;text-decoration: none;}
.nav{
width: 210px;
background: #b92422;
}
.nav ul li{
position: relative;
}
.nava{
width: 200px;
display: block;
height: 35px;
line-height: 35px;
padding-left: 10px;
border-bottom: 1px solid #911c1c;
box-shadow: 0 1px 1px #d03b39 inset;
color: #fff;
}
.nav ul li span{
position: absolute;
top: 5px;
right: 5px;
height: 20px;
line-height: 20px;
background: #9e1919;
padding: 0 5px;
font-size: 12px;
}
.ntext{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.ntext a{
display: block;
background: #9e1919;
border-bottom: 1px solid #821717;
height: 30px;
line-height: 30px;
padding-left: 15px;
-webkit-transition:all 500ms linear;
-moz-transition:all 500ms linear;
-ms-transition:all 500ms linear;
-o-transition:all 500ms linear;
transition:all 500ms linear;
}
.ntext a:hover{
background: #ff6600;
color: #fff;
}
.nav ul li .ntext{height: 0;overflow: hidden;}
.nav ul li:target .ntext{height: auto;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li id="n1">
<a href="#n1" class="nava">IT培训<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n2">
<a href="#n2" class="nava">语言培训<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n3">
<a href="#n3" class="nava">亲子课堂<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n4">
<a href="#n4" class="nava">中小学/大学<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no">
<title>CSS3树形菜单</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: #eee;font-size: 14px;font-family: "微软雅黑";}
ul, li{list-style: none;}
a{color: #fff;text-decoration: none;}
.nav{
width: 210px;
background: #b92422;
}
.nav ul li{
position: relative;
}
.nava{
width: 200px;
display: block;
height: 35px;
line-height: 35px;
padding-left: 10px;
border-bottom: 1px solid #911c1c;
box-shadow: 0 1px 1px #d03b39 inset;
color: #fff;
}
.nav ul li span{
position: absolute;
top: 5px;
right: 5px;
width:0;
height:0;
border-width:10px;
border-style:dashed dashed dashed solid;
border-color:transparent transparent transparent #fff;
text-indent: -999px;
}
.ntext{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.ntext a{
display: block;
background: #9e1919;
border-bottom: 1px solid #821717;
height: 30px;
line-height: 30px;
padding-left: 15px;
-webkit-transition:all 500ms linear;
-moz-transition:all 500ms linear;
-ms-transition:all 500ms linear;
-o-transition:all 500ms linear;
transition:all 500ms linear;
}
.ntext a:hover{
background: #ff6600;
color: #fff;
}
.nav ul li .ntext{height: 0;overflow: hidden;}
.nav ul li:target .ntext{height: auto;}
.nav ul li:target a span{
border-style:solid dashed dashed dashed;
border-color:#fff transparent transparent transparent;
top:15px;
right: 15px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li id="n1">
<a href="#n1" class="nava">IT培训<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n2">
<a href="#n2" class="nava">语言培训<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n3">
<a href="#n3" class="nava">亲子课堂<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n4">
<a href="#n4" class="nava">中小学/大学<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
</ul>
</div>
</body>
</html>