<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; padding: 0px; list-style: none; } ul li{ float: left; margin-left: 3px; text-align: center; border: 1px solid transparent; width: 90px; } ul li ul { display: none; /* border: 1px solid red;*/ width: 100px; } </style> </head> <body> <ul> <li onmousemove="ss(1)" onmouseout="h()" > <a href="http://www.baidu.com">首页|</a> <ul id="s1"> <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 onmousemove="ss(2)" onmouseout="h(2)"> <a href="#">公积金查询</a> <ul id="s2"> <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 onmousemove="ss(3)" onmouseout="h(3)"> <a href="#">政府法规</a> <ul id="s3"> <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 onmousemove="ss(4)" onmouseout="h(4)"> <a href="#">公积金提取</a> <ul id="s4"> <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> </body> <script> function ss(num){ if(num==1){ document.getElementById("s1").style.display="block"; }else if(num==2){ document.getElementById("s2").style.display="block"; }else if(num==3){ document.getElementById("s3").style.display="block"; }else{ document.getElementById("s4").style.display="block"; } } function h(){ document.getElementById("s1").style.display="none"; document.getElementById("s2").style.display="none"; document.getElementById("s3").style.display="none"; document.getElementById("s4").style.display="none"; } </script> </html>
原文：https://www.cnblogs.com/qurui1998/p/10492266.html