标签：target style over lock ges line text position sheet
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三级菜单练习</title> 6 </head> 7 <link rel="stylesheet" href="menu.css" type="text/css" /> 8 <body> 9 <div> 10 <ul id="nav"> 11 <li> 12 <a href="">一级菜单</a> 13 <ul> 14 <li> 15 <a href="">二级菜单</a> 16 <ul> 17 <li><a href="">三级菜单</a></li> 18 <li><a href="">三级菜单</a></li> 19 <li><a href="">三级菜单</a></li> 20 <li><a href="">三级菜单</a></li> 21 <li><a href="">三级菜单</a></li> 22 <li><a href="">三级菜单</a></li> 23 <li><a href="">三级菜单</a></li> 24 <li><a href="">三级菜单</a></li> 25 <li><a href="">三级菜单</a></li> 26 </ul> 27 </li> 28 <li> 29 <a href="">二级菜单</a> 30 <ul> 31 <li><a href="">三级菜单</a></li> 32 <li><a href="">三级菜单</a></li> 33 <li><a href="">三级菜单</a></li> 34 <li><a href="">三级菜单</a></li> 35 <li><a href="">三级菜单</a></li> 36 <li><a href="">三级菜单</a></li> 37 </ul> 38 </li> 39 <li> 40 <a href="">二级菜单</a> 41 <ul> 42 <li><a href="">三级菜单</a></li> 43 <li><a href="">三级菜单</a></li> 44 <li><a href="">三级菜单</a></li> 45 </ul> 46 </li> 47 <li> 48 <a href="">二级菜单</a> 49 <ul> 50 <li><a href="">三级菜单</a></li> 51 <li><a href="">三级菜单</a></li> 52 <li><a href="">三级菜单</a></li> 53 </ul> 54 </li> 55 </ul> 56 </li> 57 <li> 58 <a href="">一级菜单</a> 59 <ul> 60 <li> 61 <a href="">二级菜单</a> 62 <ul> 63 <li><a href="">三级菜单</a></li> 64 <li><a href="">三级菜单</a></li> 65 <li><a href="">三级菜单</a></li> 66 </ul> 67 </li> 68 <li> 69 <a href="">二级菜单</a> 70 <ul> 71 <li><a href="">三级菜单</a></li> 72 <li><a href="">三级菜单</a></li> 73 <li><a href="">三级菜单</a></li> 74 </ul> 75 </li> 76 <li> 77 <a href="">二级菜单</a> 78 <ul> 79 <li><a href="">三级菜单</a></li> 80 <li><a href="">三级菜单</a></li> 81 <li><a href="">三级菜单</a></li> 82 </ul> 83 </li> 84 <li> 85 <a href="">二级菜单</a> 86 <ul> 87 <li><a href="">三级菜单</a></li> 88 <li><a href="">三级菜单</a></li> 89 <li><a href="">三级菜单</a></li> 90 </ul> 91 </li> 92 </ul> 93 </li> 94 <li> 95 <a href="">一级菜单</a> 96 <ul> 97 <li> 98 <a href="">二级菜单</a> 99 <ul> 100 <li><a href="">三级菜单</a></li> 101 <li><a href="">三级菜单</a></li> 102 <li><a href="">三级菜单</a></li> 103 </ul> 104 </li> 105 <li> 106 <a href="">二级菜单</a> 107 <ul> 108 <li><a href="">三级菜单</a></li> 109 <li><a href="">三级菜单</a></li> 110 <li><a href="">三级菜单</a></li> 111 </ul> 112 </li> 113 <li> 114 <a href="">二级菜单</a> 115 <ul> 116 <li><a href="">三级菜单</a></li> 117 <li><a href="">三级菜单</a></li> 118 <li><a href="">三级菜单</a></li> 119 </ul> 120 </li> 121 <li> 122 <a href="">二级菜单</a> 123 <ul> 124 <li><a href="">三级菜单</a></li> 125 <li><a href="">三级菜单</a></li> 126 <li><a href="">三级菜单</a></li> 127 </ul> 128 </li> 129 </ul> 130 </li> 131 <li> 132 <a href="">一级菜单1</a> 133 <ul> 134 <li> 135 <a href="">二级菜单</a> 136 <ul> 137 <li><a href="">三级菜单</a></li> 138 <li><a href="">三级菜单</a></li> 139 <li><a href="">三级菜单</a></li> 140 </ul> 141 </li> 142 <li> 143 <a href="">二级菜单</a> 144 <ul> 145 <li><a href="">三级菜单</a></li> 146 <li><a href="">三级菜单</a></li> 147 <li><a href="">三级菜单</a></li> 148 </ul> 149 </li> 150 <li> 151 <a href="">二级菜单2</a> 152 <ul> 153 <li><a href="">三级菜单1</a>|<a href="">三级菜单2</a></li> 154 <li><a href="">三级菜单</a></li> 155 <li><a href="">三级菜单</a></li> 156 </ul> 157 </li> 158 <li> 159 <a href="">二级菜单</a> 160 <ul> 161 <li><a href="http://www.baidu.com" target="_blank">三级菜单3</a></li> 162 <li><a href="">三级菜单</a></li> 163 <li><a href="">三级菜单</a></li> 164 </ul> 165 </li> 166 </ul> 167 </li> 168 </ul> 169 </div> 170 <hr> 171 <p>...</p> 172 </body> 173 </html>
1 *{ 2 margin: 0px; 3 padding: 0px; 4 text-decoration: none; 5 list-style:none; 6 color: black; 7 } 8 a{ 9 /*background-color: #aaa;*/ 10 padding: 10px 20px; 11 font-size: 20px; 12 line-height: 44.3px; 13 font-weight: bold; 14 font-family: arial; 15 /*border: 1px solid black;*/ 16 } 17 #nav>li>ul>li>a{ 18 font-size: 18px; 19 } 20 #nav>li>ul>li>ul>li>a{ 21 font-size: 16px; 22 } 23 #nav>li{ 24 float: left; 25 } 26 #nav>li:hover>ul{ 27 display: block; 28 position: absolute; 29 } 30 #nav>li>ul>li{ 31 position: relative; 32 } 33 #nav>li>ul>li:hover>ul{ 34 display: block; 35 position: absolute; 36 left: 120px; 37 top: 0px; 38 min-width: 150px; 39 } 40 #nav>li>ul>li:hover>ul>li{ 41 } 42 #nav a:hover{ 43 background-color: #f40; 44 color: #fff; 45 } 46 #nav>li>ul{ 47 display: none; 48 } 49 50 #nav>li>ul>li>ul{ 51 display: none; 52 } 53 div{ 54 /*display: block;*/ 55 margin-left: 400px; 56 } 57 58 div::after{ 59 content: ‘‘; 60 display: block; 61 clear: both; 62 }
标签：target style over lock ges line text position sheet
原文地址：http://www.cnblogs.com/yaochc/p/7816039.html
