标签：导航 pad oct color 菜单 nbsp line 三级菜单 radius
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 a{ 12 text-decoration: none; 13 border-radius: 4px; 14 } 15 ul,li{ 16 list-style:none; 17 } 18 #nav{ 19 width:500px; 20 height:30px; 21 margin:30px auto; 22 } 23 .nav1{ 24 position:relative; 25 } 26 .nav1>li{ 27 float: left; 28 } 29 .nav1>li>a{ 30 display:block; 31 width:98px; 32 height:28px; 33 border:1px solid #f1edee; 34 color:#34312a; 35 text-align:center; 36 line-height:28px; 37 background:#fe0000; 38 } 39 .nav2{ 40 display:none; 41 position:absolute; 42 } 43 .nav2>li{ 44 position:relative; 45 } 46 .nav2>li>a{ 47 display:block; 48 width:98px; 49 height:28px; 50 border:1px solid #f1edee; 51 color:#34312a; 52 text-align:center; 53 line-height:28px; 54 background:#0000fe; 55 } 56 .nav1>li:hover .nav2{ 57 display:block; 58 } 59 .nav3{ 60 display:none; 61 position:absolute; 62 left:100px; 63 } 64 .nav3>li>a{ 65 display:block; 66 width:98px; 67 height:28px; 68 border:1px solid #f1edee; 69 color:#34312a; 70 text-align:center; 71 line-height:28px; 72 background:#ffc0cb; 73 } 74 li:hover>a{ 75 background:#ffff01; 76 } 77 .nav2>li:hover .nav3{ 78 display:block; 79 } 80 </style> 81 </head> 82 <body> 83 <div id="nav"> 84 <ul class="nav1"> 85 <li> 86 <a href="#">一级导航</a> 87 <ul class="nav2"> 88 <li> 89 <a href="#">二级导航</a> 90 <ul class="nav3"> 91 <li><a href="">三级导航</a></li> 92 <li><a href="">三级导航</a></li> 93 <li><a href="">三级导航</a></li> 94 </ul> 95 </li> 96 <li> 97 <a href="#">二级导航</a> 98 <ul class="nav3"> 99 <li><a href="">三级导航</a></li> 100 <li><a href="">三级导航</a></li> 101 <li><a href="">三级导航</a></li> 102 </ul> 103 </li> 104 <li> 105 <a href="#">二级导航</a> 106 <ul class="nav3"> 107 <li><a href="">三级导航</a></li> 108 <li><a href="">三级导航</a></li> 109 <li><a href="">三级导航</a></li> 110 </ul> 111 </li> 112 </ul> 113 </li> 114 <li> 115 <a href="#">一级导航</a> 116 <ul class="nav2"> 117 <li> 118 <a href="#">二级导航</a> 119 <ul class="nav3"> 120 <li><a href="">三级导航</a></li> 121 <li><a href="">三级导航</a></li> 122 <li><a href="">三级导航</a></li> 123 </ul> 124 </li> 125 <li> 126 <a href="#">二级导航</a> 127 <ul class="nav3"> 128 <li><a href="">三级导航</a></li> 129 <li><a href="">三级导航</a></li> 130 <li><a href="">三级导航</a></li> 131 </ul> 132 </li> 133 <li> 134 <a href="#">二级导航</a> 135 <ul class="nav3"> 136 <li><a href="">三级导航</a></li> 137 <li><a href="">三级导航</a></li> 138 <li><a href="">三级导航</a></li> 139 </ul> 140 </li> 141 </ul> 142 </li> 143 <li> 144 <a href="#">一级导航</a> 145 <ul class="nav2"> 146 <li> 147 <a href="#">二级导航</a> 148 <ul class="nav3"> 149 <li><a href="">三级导航</a></li> 150 <li><a href="">三级导航</a></li> 151 <li><a href="">三级导航</a></li> 152 </ul> 153 </li> 154 <li> 155 <a href="#">二级导航</a> 156 <ul class="nav3"> 157 <li><a href="">三级导航</a></li> 158 <li><a href="">三级导航</a></li> 159 <li><a href="">三级导航</a></li> 160 </ul> 161 </li> 162 <li> 163 <a href="#">二级导航</a> 164 <ul class="nav3"> 165 <li><a href="">三级导航</a></li> 166 <li><a href="">三级导航</a></li> 167 <li><a href="">三级导航</a></li> 168 </ul> 169 </li> 170 </ul> 171 </li> 172 <li> 173 <a href="#">一级导航</a> 174 <ul class="nav2"> 175 <li> 176 <a href="#">二级导航</a> 177 <ul class="nav3"> 178 <li><a href="">三级导航</a></li> 179 <li><a href="">三级导航</a></li> 180 <li><a href="">三级导航</a></li> 181 </ul> 182 </li> 183 <li> 184 <a href="#">二级导航</a> 185 <ul class="nav3"> 186 <li><a href="">三级导航</a></li> 187 <li><a href="">三级导航</a></li> 188 <li><a href="">三级导航</a></li> 189 </ul> 190 </li> 191 <li> 192 <a href="#">二级导航</a> 193 <ul class="nav3"> 194 <li><a href="">三级导航</a></li> 195 <li><a href="">三级导航</a></li> 196 <li><a href="">三级导航</a></li> 197 </ul> 198 </li> 199 </ul> 200 </li> 201 <li> 202 <a href="#">一级导航</a> 203 <ul class="nav2"> 204 <li> 205 <a href="#">二级导航</a> 206 <ul class="nav3"> 207 <li><a href="">三级导航</a></li> 208 <li><a href="">三级导航</a></li> 209 <li><a href="">三级导航</a></li> 210 </ul> 211 </li> 212 <li> 213 <a href="#">二级导航</a> 214 <ul class="nav3"> 215 <li><a href="">三级导航</a></li> 216 <li><a href="">三级导航</a></li> 217 <li><a href="">三级导航</a></li> 218 </ul> 219 </li> 220 <li> 221 <a href="#">二级导航</a> 222 <ul class="nav3"> 223 <li><a href="">三级导航</a></li> 224 <li><a href="">三级导航</a></li> 225 <li><a href="">三级导航</a></li> 226 </ul> 227 </li> 228 </ul> 229 </li> 230 </ul> 231 </div> 232 </body> 233 </html>
标签：导航 pad oct color 菜单 nbsp line 三级菜单 radius
原文地址：https://www.cnblogs.com/liufuyuan/p/10259981.html
