效果圖:css
代碼:html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>jQuery實現三級聯動菜單(鼠標懸停聯動)</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> li { list-style: none; line-height: 36px; border: 1px solid #ddd; width: 200px; padding-left: 10px; margin: -1px; } li.active { background: #3c96ff; } .level2, .level3 { float: left; height: 0; margin-left: 161px; margin-top: -36px; display: none; } </style> </head> <body> <ul class="level1"> <li> <span>湖北省</span> <ul class="level2"> <li> <span>武漢市</span> <ul class="level3"> <li><a href="#">江漢區</a></li> <li><a href="#">礄口區</a></li> <li><a href="#">漢陽區</a></li> <li><a href="#">武昌區</a></li> <li><a href="#">青山區</a></li> <li><a href="#">洪山區</a></li> <li><a href="#">蔡甸區</a></li> <li><a href="#">江夏區</a></li> <li><a href="#">黃陂區</a></li> <li><a href="#">新洲區</a></li> <li><a href="#">東西湖區</a></li> <li><a href="#">漢南區</a></li> </ul> </li> <li> <span>鄂州市</span> <ul class="level3"> <li><a href="#">鄂城區</a></li> <li><a href="#">華容區</a></li> <li><a href="#">梁子湖區</a></li> </ul> </li> <li> <span>孝感市</span> <ul class="level3"> <li><a href="#">孝南區</a></li> <li><a href="#">漢川市</a></li> <li><a href="#">應城市</a></li> <li><a href="#">安陸市</a></li> <li><a href="#">雲夢縣</a></li> <li><a href="#">孝昌縣</a></li> <li><a href="#">大悟縣</a></li> </ul> </li> </ul> </li> <li> <span>廣東省</span> <ul class="level2"> <li> <span>廣州市</span> <ul class="level3"> <li><a href="#">越秀區</a></li> <li><a href="#">荔灣區</a></li> <li><a href="#">海珠區</a></li> <li><a href="#">天河區</a></li> <li><a href="#">白雲區</a></li> <li><a href="#">黃浦區</a></li> <li><a href="#">番禺區</a></li> <li><a href="#">花都區</a></li> <li><a href="#">南沙區</a></li> <li><a href="#">增城區</a></li> <li><a href="#">從化區</a></li> </ul> </li> <li> <span>深圳市</span> <ul class="level3"> <li><a href="#">福田區</a></li> <li><a href="#">羅湖區</a></li> <li><a href="#">南山區</a></li> <li><a href="#">鹽田區</a></li> <li><a href="#">寶安區</a></li> <li><a href="#">龍崗區</a></li> <li><a href="#">龍華區</a></li> <li><a href="#">坪山區</a></li> <li><a href="#">光明區</a></li> </ul> </li> <li> <span>佛山市</span> <ul class="level3"> <li><a href="#">禪城區</a></li> <li><a href="#">南海區</a></li> <li><a href="#">順德區</a></li> <li><a href="#">三水區</a></li> <li><a href="#">高明區</a></li> </ul> </li> </ul> </li> </ul> <script> $(document).on("mouseover", ".level1 li", function () { $(this).addClass("active").children(".level2").show(); }).on("mouseout", ".level1 li", function () { $(this).removeClass("active").children(".level2").hide(); }); $(document).on("mouseover", ".level2 li", function () { $(this).addClass("active").children(".level3").show(); }).on("mouseout", ".level1 li", function () { $(this).removeClass("active").children(".level3").hide(); }); $(document).on("mouseover", ".level2 li", function () { $(this).addClass("active"); }).on("mouseout", ".level1 li", function () { $(this).removeClass("active"); }); </script> </body> </html>