1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no"> 6 <title>CSS3树形菜单</title> 7 <style type="text/css"> 8 *{margin: 0;padding: 0;} 9 body{background: #eee;font-size: 14px;font-family: "微软雅黑";} 10 ul, li{list-style: none;} 11 a{color: #fff;text-decoration: none;} 12 .nav{ 13 width: 210px; 14 background: #b92422; 15 } 16 .nav ul li{ 17 position: relative; 18 } 19 .nava{ 20 width: 200px; 21 display: block; 22 height: 35px; 23 line-height: 35px; 24 padding-left: 10px; 25 border-bottom: 1px solid #911c1c; 26 box-shadow: 0 1px 1px #d03b39 inset; 27 color: #fff; 28 } 29 .nav ul li span{ 30 position: absolute; 31 top: 5px; 32 right: 5px; 33 height: 20px; 34 line-height: 20px; 35 background: #9e1919; 36 padding: 0 5px; 37 font-size: 12px; 38 } 39 .ntext{ 40 -webkit-transition:all 0.5s ease; 41 -moz-transition:all 0.5s ease; 42 -ms-transition:all 0.5s ease; 43 -o-transition:all 0.5s ease; 44 transition:all 0.5s ease; 45 } 46 .ntext a{ 47 display: block; 48 background: #9e1919; 49 border-bottom: 1px solid #821717; 50 height: 30px; 51 line-height: 30px; 52 padding-left: 15px; 53 -webkit-transition:all 500ms linear; 54 -moz-transition:all 500ms linear; 55 -ms-transition:all 500ms linear; 56 -o-transition:all 500ms linear; 57 transition:all 500ms linear; 58 } 59 .ntext a:hover{ 60 background: #ff6600; 61 color: #fff; 62 } 63 .nav ul li .ntext{height: 0;overflow: hidden;} 64 .nav ul li:target .ntext{height: auto;} 65 </style> 66 </head> 67 <body> 68 <div class="nav"> 69 <ul> 70 <li id="n1"> 71 <a href="#n1" class="nava">IT培训<span>更多</span></a> 72 <div class="ntext"> 73 <a href="#">网页制作</a> 74 <a href="#">编程语言</a> 75 <a href="#">编程语言</a> 76 </div> 77 </li> 78 <li id="n2"> 79 <a href="#n2" class="nava">语言培训<span>更多</span></a> 80 <div class="ntext"> 81 <a href="#">网页制作</a> 82 <a href="#">编程语言</a> 83 <a href="#">编程语言</a> 84 </div> 85 </li> 86 <li id="n3"> 87 <a href="#n3" class="nava">亲子课堂<span>更多</span></a> 88 <div class="ntext"> 89 <a href="#">网页制作</a> 90 <a href="#">编程语言</a> 91 <a href="#">编程语言</a> 92 </div> 93 </li> 94 <li id="n4"> 95 <a href="#n4" class="nava">中小学/大学<span>更多</span></a> 96 <div class="ntext"> 97 <a href="#">网页制作</a> 98 <a href="#">编程语言</a> 99 <a href="#">编程语言</a> 100 </div> 101 </li> 102 </ul> 103 </div> 104 </body> 105 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no"> 6 <title>CSS3树形菜单</title> 7 <style type="text/css"> 8 *{margin: 0;padding: 0;} 9 body{background: #eee;font-size: 14px;font-family: "微软雅黑";} 10 ul, li{list-style: none;} 11 a{color: #fff;text-decoration: none;} 12 .nav{ 13 width: 210px; 14 background: #b92422; 15 } 16 .nav ul li{ 17 position: relative; 18 } 19 .nava{ 20 width: 200px; 21 display: block; 22 height: 35px; 23 line-height: 35px; 24 padding-left: 10px; 25 border-bottom: 1px solid #911c1c; 26 box-shadow: 0 1px 1px #d03b39 inset; 27 color: #fff; 28 } 29 .nav ul li span{ 30 position: absolute; 31 top: 5px; 32 right: 5px; 33 width:0; 34 height:0; 35 border-width:10px; 36 border-style:dashed dashed dashed solid; 37 border-color:transparent transparent transparent #fff; 38 text-indent: -999px; 39 } 40 .ntext{ 41 -webkit-transition:all 0.5s ease; 42 -moz-transition:all 0.5s ease; 43 -ms-transition:all 0.5s ease; 44 -o-transition:all 0.5s ease; 45 transition:all 0.5s ease; 46 } 47 .ntext a{ 48 display: block; 49 background: #9e1919; 50 border-bottom: 1px solid #821717; 51 height: 30px; 52 line-height: 30px; 53 padding-left: 15px; 54 -webkit-transition:all 500ms linear; 55 -moz-transition:all 500ms linear; 56 -ms-transition:all 500ms linear; 57 -o-transition:all 500ms linear; 58 transition:all 500ms linear; 59 } 60 .ntext a:hover{ 61 background: #ff6600; 62 color: #fff; 63 } 64 .nav ul li .ntext{height: 0;overflow: hidden;} 65 .nav ul li:target .ntext{height: auto;} 66 .nav ul li:target a span{ 67 border-style:solid dashed dashed dashed; 68 border-color:#fff transparent transparent transparent; 69 top:15px; 70 right: 15px; 71 } 72 </style> 73 </head> 74 <body> 75 <div class="nav"> 76 <ul> 77 <li id="n1"> 78 <a href="#n1" class="nava">IT培训<span>更多</span></a> 79 <div class="ntext"> 80 <a href="#">网页制作</a> 81 <a href="#">编程语言</a> 82 <a href="#">编程语言</a> 83 </div> 84 </li> 85 <li id="n2"> 86 <a href="#n2" class="nava">语言培训<span>更多</span></a> 87 <div class="ntext"> 88 <a href="#">网页制作</a> 89 <a href="#">编程语言</a> 90 <a href="#">编程语言</a> 91 </div> 92 </li> 93 <li id="n3"> 94 <a href="#n3" class="nava">亲子课堂<span>更多</span></a> 95 <div class="ntext"> 96 <a href="#">网页制作</a> 97 <a href="#">编程语言</a> 98 <a href="#">编程语言</a> 99 </div> 100 </li> 101 <li id="n4"> 102 <a href="#n4" class="nava">中小学/大学<span>更多</span></a> 103 <div class="ntext"> 104 <a href="#">网页制作</a> 105 <a href="#">编程语言</a> 106 <a href="#">编程语言</a> 107 </div> 108 </li> 109 </ul> 110 </div> 111 </body> 112 </html>