純CSS酷黑風格三級下拉菜單代碼
07-13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS樣式三級下拉菜單</title><style>@charset "utf-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;}body a{color:#FFF;}.box{margin:240px auto; padding:0px; width:1000px;}.box ul{margin:0px; padding:0px; list-style:none;}.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;}.box ul li:hover ul{display:block;}.box ul li a{text-align:center; width:121px; height:37px; line-height:35px; display:block; text-decoration:none;}.box ul li ul{display:none;}.box ul li ul li{margin:0px 0px 2px 0px; padding:0px; background:url(/jscss/demoimg/201303/zkTwo.png) no-repeat;}.box ul li ul li:hover{background:#666;}.box ul li ul li:hover ul{visibility:visible;}.box ul li ul li ul{visibility:hidden; position:relative; top:-37px; left:121px;}.box ul li ul li ul li{background:#000;}</style></head><body><div class="box"> <ul> <li><a href="#">源碼愛好者</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">技術文章</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">源碼下載</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">廣告聯繫</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">最新更新</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">源代碼下載</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">編程技巧</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="/dll">編程式控制件</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">電子書籍</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">網頁特效</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> </ul></div></body></html>
推薦閱讀：
推薦閱讀：
※客廳沙發風格分類及尺寸詳解
※10款現代風格客廳設計！2018客廳潮流風向標！
※田園風格
※做個小測試，看哪種裝修風格適合你...
※我們心中的安全基地是如何建立的？——談談依戀風格Part I