<!DOCTYPE html><html><head><title>test</title><style type = "text/css">/*設定萬用字元樣式*/ *{ margin:0; padding:0;}body{ font-size:12px;}ul{ list-style:none;}a{ text-decoration:none;}</p><p>/*設定二級導航樣式*/ .nav { width:500px; height:30px; background-color:#b4b4b4; /*導覽列置中*/ margin:auto;}.nav ul li { width:100px; height:30px; float:left; position:relative;}.nav ul li a { display:block; width:96px; border:2px solid gray; height:26px; line-height:26px; text-align:center;}.nav ul li a:hover { background-color:yellow;}</p><p>/*設定一級導航樣式*/.nav ul li ul{ display:none;}.nav ul li:hover ul{ display:block; width:100px; position:absolute; top:30px; left:0; background-color:white;}.nav ul li:hover ul li a{ display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center;}.nav ul li:hover ul li a:hover{ background-color:orange;}</p><p>/*設定三級導航樣式*/.nav ul li:hover ul li ul { display:none;}.nav ul li:hover ul li:hover ul{ display:block; width:100px; position:absolute; top:0px; left:100px; background-color:#b4b4b4;}.nav ul li:hover ul li:hover ul li { width:100px; height:30px; }.nav ul li:hover ul li:hover ul li a { display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; }.nav ul li:hover ul li:hover ul li a:hover { background-color:#00CC00;}.nav ul li:hover ul .nav_jw ul { display:none;}.nav ul li:hover ul .nav_jw:hover ul{ display:block; width:100px; position:absolute; top:0px; left:-100px; background-color:#b4b4b4;}.nav ul li:hover ul .nav_jw:hover ul li { width:100px; height:30px; }.nav ul li:hover ul .nav_jw:hover ul li a { display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; }.nav ul li:hover ul .nav_jw:hover ul li a:hover { background-color:#00CC00;}</p><p></style></head><body><p class = "nav"><ul><li><a href = "#">一級導航</a> <ul> <li><a href = "#">二級導航</a> <ul> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> </ul> </li> <li><a href = "#">二級導航</a> <ul> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> </ul> </li> <li><a href = "#">二級導航</a> <ul> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> </ul> </li> </ul></li><li><a href = "#">一級導航</a> <ul> <li><a href = "#">二級導航</a></li> <li><a href = "#">二級導航</a></li> <li><a href = "#">二級導航</a></li> </ul></li><li><a href = "#">一級導航</a> <ul> <li><a href = "#">二級導航</a></li> <li><a href = "#">二級導航</a></li> <li><a href = "#">二級導航</a></li> </ul></li><li><a href = "#">一級導航</a> <ul> <li><a href = "#">二級導航</a></li> <li><a href = "#">二級導航</a></li> <li><a href = "#">二級導航</a></li> </ul></li><li><a href = "#">一級導航</a> <ul> <li class="nav_jw"><a href = "#">二級導航</a> <ul> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> </ul> </li> <li class="nav_jw"><a href = "#">二級導航</a> <ul> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> </ul> </li> <li class="nav_jw"><a href = "#">二級導航</a> <ul> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> <li><a href = "#">三級導航</a></li> </ul> </li> </ul></li></ul></p></body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
