首页 > 代码库 > CSS样式三级下拉菜单
CSS样式三级下拉菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>CSS样式三级下拉菜单</title> 6 <style> 7 @charset "utf-8"; 8 body{margin:0px; padding:0px; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#FFF; background:url(/jscss/demoimg/201303/tittlePicture.png) no-repeat;} 9 body a{color:#FFF;} 10 .box{margin:240px auto; padding:0px; width:1000px;} 11 .box ul{margin:0px; padding:0px; list-style:none;} 12 .box ul li{margin:0px 2px 0px 0px; padding:0px; width:120px; height:35px; display:inline; float:left; background:url(/jscss/demoimg/201303/zk.png) no-repeat 0 0; border-radius:4px; box-shadow:#000 0px 0px 1px;} 13 .box ul li:hover ul{display:block;} 14 .box ul li a{text-align:center; width:121px; height:37px; line-height:35px; display:block; text-decoration:none;} 15 .box ul li ul{display:none;} 16 .box ul li ul li{margin:0px 0px 2px 0px; padding:0px; background:url(/jscss/demoimg/201303/zkTwo.png) no-repeat;} 17 .box ul li ul li:hover{background:#666;} 18 .box ul li ul li:hover ul{visibility:visible;} 19 .box ul li ul li ul{visibility:hidden; position:relative; top:-37px; left:121px;} 20 .box ul li ul li ul li{background:#000;} 21 </style> 22 </head> 23 <body> 24 <div class="box"> 25 <ul> 26 <li><a href="#">源码爱好者</a> 27 <ul> 28 <li><a href="#">Two-level menu</a> 29 <ul> 30 <li><a href="#">Three-level menu</a></li> 31 <li><a href="#">Three-level menu</a></li> 32 <li><a href="#">Three-level menu</a></li> 33 <li><a href="#">Three-level menu</a></li> 34 </ul> 35 </li> 36 <li><a href="#">技术文章</a> 37 <ul> 38 <li><a href="#">Three-level menu</a></li> 39 <li><a href="#">Three-level menu</a></li> 40 <li><a href="#">Three-level menu</a></li> 41 <li><a href="#">Three-level menu</a></li> 42 </ul> 43 </li> 44 <li><a href="#">源码下载</a> 45 <ul> 46 <li><a href="#">Three-level menu</a></li> 47 <li><a href="#">Three-level menu</a></li> 48 <li><a href="#">Three-level menu</a></li> 49 <li><a href="#">Three-level menu</a></li> 50 </ul> 51 </li> 52 <li><a href="#">Two-level menu</a> 53 <ul> 54 <li><a href="#">Three-level menu</a></li> 55 <li><a href="#">Three-level menu</a></li> 56 <li><a href="#">Three-level menu</a></li> 57 <li><a href="#">Three-level menu</a></li> 58 </ul> 59 </li> 60 <li><a href="#">Two-level menu</a> 61 <ul> 62 <li><a href="#">Three-level menu</a></li> 63 <li><a href="#">Three-level menu</a></li> 64 <li><a href="#">Three-level menu</a></li> 65 <li><a href="#">Three-level menu</a></li> 66 </ul> 67 </li> 68 </ul> 69 </li> 70 <li><a href="#">广告联系</a> 71 <ul> 72 <li><a href="#">Two-level menu</a> 73 <ul> 74 <li><a href="#">Three-level menu</a></li> 75 <li><a href="#">Three-level menu</a></li> 76 <li><a href="#">Three-level menu</a></li> 77 <li><a href="#">Three-level menu</a></li> 78 </ul> 79 </li> 80 <li><a href="#">Two-level menu</a> 81 <ul> 82 <li><a href="#">Three-level menu</a></li> 83 <li><a href="#">Three-level menu</a></li> 84 <li><a href="#">Three-level menu</a></li> 85 <li><a href="#">Three-level menu</a></li> 86 </ul> 87 </li> 88 <li><a href="#">Two-level menu</a> 89 <ul> 90 <li><a href="#">Three-level menu</a></li> 91 <li><a href="#">Three-level menu</a></li> 92 <li><a href="#">Three-level menu</a></li> 93 <li><a href="#">Three-level menu</a></li> 94 </ul> 95 </li> 96 <li><a href="#">Two-level menu</a> 97 <ul> 98 <li><a href="#">Three-level menu</a></li> 99 <li><a href="#">Three-level menu</a></li>100 <li><a href="#">Three-level menu</a></li>101 <li><a href="#">Three-level menu</a></li>102 </ul>103 </li>104 <li><a href="#">Two-level menu</a>105 <ul>106 <li><a href="#">Three-level menu</a></li>107 <li><a href="#">Three-level menu</a></li>108 <li><a href="#">Three-level menu</a></li>109 <li><a href="#">Three-level menu</a></li>110 </ul>111 </li>112 </ul>113 </li>114 <li><a href="#">最新更新</a>115 <ul>116 <li><a href="#">Two-level menu</a>117 <ul>118 <li><a href="#">Three-level menu</a></li>119 <li><a href="#">Three-level menu</a></li>120 <li><a href="#">Three-level menu</a></li>121 <li><a href="#">Three-level menu</a></li>122 </ul>123 </li>124 <li><a href="#">Two-level menu</a>125 <ul>126 <li><a href="#">Three-level menu</a></li>127 <li><a href="#">Three-level menu</a></li>128 <li><a href="#">Three-level menu</a></li>129 <li><a href="#">Three-level menu</a></li>130 </ul>131 </li>132 <li><a href="#">Two-level menu</a>133 <ul>134 <li><a href="#">Three-level menu</a></li>135 <li><a href="#">Three-level menu</a></li>136 <li><a href="#">Three-level menu</a></li>137 <li><a href="#">Three-level menu</a></li>138 </ul>139 </li>140 <li><a href="#">Two-level menu</a>141 <ul>142 <li><a href="#">Three-level menu</a></li>143 <li><a href="#">Three-level menu</a></li>144 <li><a href="#">Three-level menu</a></li>145 <li><a href="#">Three-level menu</a></li>146 </ul>147 </li>148 <li><a href="#">Two-level menu</a>149 <ul>150 <li><a href="#">Three-level menu</a></li>151 <li><a href="#">Three-level menu</a></li>152 <li><a href="#">Three-level menu</a></li>153 <li><a href="#">Three-level menu</a></li>154 </ul>155 </li>156 </ul>157 </li>158 <li><a href="#">源代码下载</a>159 <ul>160 <li><a href="#">Two-level menu</a>161 <ul>162 <li><a href="#">Three-level menu</a></li>163 <li><a href="#">Three-level menu</a></li>164 <li><a href="#">Three-level menu</a></li>165 <li><a href="#">Three-level menu</a></li>166 </ul>167 </li>168 <li><a href="#">Two-level menu</a>169 <ul>170 <li><a href="#">Three-level menu</a></li>171 <li><a href="#">Three-level menu</a></li>172 <li><a href="#">Three-level menu</a></li>173 <li><a href="#">Three-level menu</a></li>174 </ul>175 </li>176 <li><a href="#">Two-level menu</a>177 <ul>178 <li><a href="#">Three-level menu</a></li>179 <li><a href="#">Three-level menu</a></li>180 <li><a href="#">Three-level menu</a></li>181 <li><a href="#">Three-level menu</a></li>182 </ul>183 </li>184 <li><a href="#">Two-level menu</a>185 <ul>186 <li><a href="#">Three-level menu</a></li>187 <li><a href="#">Three-level menu</a></li>188 <li><a href="#">Three-level menu</a></li>189 <li><a href="#">Three-level menu</a></li>190 </ul>191 </li>192 <li><a href="#">Two-level menu</a>193 <ul>194 <li><a href="#">Three-level menu</a></li>195 <li><a href="#">Three-level menu</a></li>196 <li><a href="#">Three-level menu</a></li>197 <li><a href="#">Three-level menu</a></li>198 </ul>199 </li>200 </ul>201 </li>202 <li><a href="#">编程技巧</a>203 <ul>204 <li><a href="#">Two-level menu</a>205 <ul>206 <li><a href="#">Three-level menu</a></li>207 <li><a href="#">Three-level menu</a></li>208 <li><a href="#">Three-level menu</a></li>209 <li><a href="#">Three-level menu</a></li>210 </ul>211 </li>212 <li><a href="#">Two-level menu</a>213 <ul>214 <li><a href="#">Three-level menu</a></li>215 <li><a href="#">Three-level menu</a></li>216 <li><a href="#">Three-level menu</a></li>217 <li><a href="#">Three-level menu</a></li>218 </ul>219 </li>220 <li><a href="#">Two-level menu</a>221 <ul>222 <li><a href="#">Three-level menu</a></li>223 <li><a href="#">Three-level menu</a></li>224 <li><a href="#">Three-level menu</a></li>225 <li><a href="#">Three-level menu</a></li>226 </ul>227 </li>228 <li><a href="#">Two-level menu</a>229 <ul>230 <li><a href="#">Three-level menu</a></li>231 <li><a href="#">Three-level menu</a></li>232 <li><a href="#">Three-level menu</a></li>233 <li><a href="#">Three-level menu</a></li>234 </ul>235 </li>236 <li><a href="#">Two-level menu</a>237 <ul>238 <li><a href="#">Three-level menu</a></li>239 <li><a href="#">Three-level menu</a></li>240 <li><a href="#">Three-level menu</a></li>241 <li><a href="#">Three-level menu</a></li>242 </ul>243 </li>244 </ul>245 </li>246 <li><a href="/dll">编程控件</a>247 <ul>248 <li><a href="#">Two-level menu</a>249 <ul>250 <li><a href="#">Three-level menu</a></li>251 <li><a href="#">Three-level menu</a></li>252 <li><a href="#">Three-level menu</a></li>253 <li><a href="#">Three-level menu</a></li>254 </ul>255 </li>256 <li><a href="#">Two-level menu</a>257 <ul>258 <li><a href="#">Three-level menu</a></li>259 <li><a href="#">Three-level menu</a></li>260 <li><a href="#">Three-level menu</a></li>261 <li><a href="#">Three-level menu</a></li>262 </ul>263 </li>264 <li><a href="#">Two-level menu</a>265 <ul>266 <li><a href="#">Three-level menu</a></li>267 <li><a href="#">Three-level menu</a></li>268 <li><a href="#">Three-level menu</a></li>269 <li><a href="#">Three-level menu</a></li>270 </ul>271 </li>272 <li><a href="#">电子书籍</a>273 <ul>274 <li><a href="#">Three-level menu</a></li>275 <li><a href="#">Three-level menu</a></li>276 <li><a href="#">Three-level menu</a></li>277 <li><a href="#">Three-level menu</a></li>278 </ul>279 </li>280 <li><a href="#">Two-level menu</a>281 <ul>282 <li><a href="#">Three-level menu</a></li>283 <li><a href="#">Three-level menu</a></li>284 <li><a href="#">Three-level menu</a></li>285 <li><a href="#">Three-level menu</a></li>286 </ul>287 </li>288 </ul>289 </li>290 <li><a href="#">网页特效</a>291 <ul>292 <li><a href="#">Two-level menu</a>293 <ul>294 <li><a href="#">Three-level menu</a></li>295 <li><a href="#">Three-level menu</a></li>296 <li><a href="#">Three-level menu</a></li>297 <li><a href="#">Three-level menu</a></li>298 </ul>299 </li>300 <li><a href="#">Two-level menu</a>301 <ul>302 <li><a href="#">Three-level menu</a></li>303 <li><a href="#">Three-level menu</a></li>304 <li><a href="#">Three-level menu</a></li>305 <li><a href="#">Three-level menu</a></li>306 </ul>307 </li>308 <li><a href="#">Two-level menu</a>309 <ul>310 <li><a href="#">Three-level menu</a></li>311 <li><a href="#">Three-level menu</a></li>312 <li><a href="#">Three-level menu</a></li>313 <li><a href="#">Three-level menu</a></li>314 </ul>315 </li>316 <li><a href="#">Two-level menu</a>317 <ul>318 <li><a href="#">Three-level menu</a></li>319 <li><a href="#">Three-level menu</a></li>320 <li><a href="#">Three-level menu</a></li>321 <li><a href="#">Three-level menu</a></li>322 </ul>323 </li>324 <li><a href="#">Two-level menu</a>325 <ul>326 <li><a href="#">Three-level menu</a></li>327 <li><a href="#">Three-level menu</a></li>328 <li><a href="#">Three-level menu</a></li>329 <li><a href="#">Three-level menu</a></li>330 </ul>331 </li>332 </ul>333 </li>334 </ul>335 </div>336 </body>337 </html>
CSS样式三级下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。