1 <html> 2 <head> 3 <title>标题示例</title> 4 <meta charset="UTF-8"> 5 <style> 6 /*在全局上清除盒模型的margin和padding*/ 7 * { 8 margin: 0; 9 padding: 0; 10 box-sizing: padding-box; 11 } 12 body { 13 padding-top: 100px; 14 text-align: center; 15 } 16 /*清除ul li的前缀*/ 17 ul li { 18 list-style: none; 19 } 20 /*清除超链接的下划线*/ 21 a { 22 text-decoration: none; 23 } 24 /*给标题容器div设置CSS*/ 25 div.menuDiv { 26 position: relative; 27 /* menu header width and height */ 28 height: 30px; 29 width: 610px; 30 border: #aabbff solid 2px; 31 display: block; 32 margin: 0 auto; 33 } 34 div.menuDiv ul a { 35 line-height: 30px; 36 } 37 /*设置以及标题的样式*/ 38 div.menuDiv > ul { 39 margin: 0; 40 padding: 0; 41 position: absolute; 42 height: 100%; 43 width: 100%; 44 list-style-type: none; 45 background-color: #fffabf; 46 /*该语句的意义在哪里？*/ 47 overflow: visible; 48 } 49 div.menuDiv > ul > li { 50 border-right: #aabbff solid 2px; 51 } 52 div.menuDiv > ul > li:last-child { 53 border-right: none; 54 } 55 div.menuDiv ul li { 56 display: block; 57 float: left; 58 height: auto; 59 width: 120px; 60 } 61 62 /*设置二级标题的默认样式*/ 63 div.menuDiv > ul > li > ul { 64 display: none; 65 position: static; 66 background-color: yellow; 67 /*border: 1px #666666 solid;*/ 68 } 69 70 /*这句话是二级菜单生成的核心部分*/ 71 div.menuDiv li:hover > ul { 72 display: block; 73 } 74 75 /*设置三级标题的默认样式*/ 76 div.menuDiv ul ul li { 77 position: relative; 78 float: none; 79 display: block; 80 } 81 div.menuDiv ul ul ul { 82 display: none; 83 position: absolute; 84 float: none; 85 top: 1px; 86 left: 120px; 87 margin: 0; 88 } 89 div.menuDiv ul ul ul li { 90 border: black solid 1px; 91 background: lightblue; 92 } 93 </style> 94 </head> 95 <body> 96 <div class="menuDiv"> 97 <ul> 98 <li> 99 <a href="#">1</a> 100 <ul> 101 <li> 102 <a href="#">1.1</a> 103 <ul> 104 <li><a href="#">1.1.1</a></li> 105 <li><a href="#">1.1.2</a></li> 106 <li><a href="#">1.1.3</a></li> 107 </ul> 108 </li> 109 <li> 110 <a href="#">1.2</a> 111 </li> 112 <li> 113 <a href="#">1.3</a> 114 </li> 115 </ul> 116 </li> 117 <li><a href="#">2</a></li> 118 <li><a href="#">3</a></li> 119 <li><a href="#">4</a></li> 120 <li><a href="#">5</a></li> 121 </ul> 122 </div> 123 </body> 124 </html>
