*{ padding: 0; margin: 0; } a{ text-decoration: none; color: #000; } ul,li{ list-style: none; } .menu{ margin: 50px auto; width: 500px; height: 35px; background-color: #ccc; text-align: center; line-height: 35px; } .menu li{ float: left; width: 20%; position: relative; } .menu li a{ display: block; } .menu li a:hover{ background-color: burlywood; } .menu li ul{ display: none; position: absolute; left: 0; } .menu li ul li{ width: 100%; margin-top: 2px; background-color: darkgray; } .menu li ul li:hover{ cursor: pointer; background-color: chartreuse; }
三、JQ实现
html和jq部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS下拉菜单</title> <link type="text/css" href="https://www.jb51.net/css/style.css" /> </head> <body> <ul> <li> <a href="#" >首页</a> </li> <li> <a href="#" >菜单一</a> <ul> <li>内容一</li> <li>内容一</li> <li>内容一</li> </ul> </li> <li> <a href="#" >菜单二</a> <ul> <li>内容二</li> <li>内容二</li> <li>内容二</li> </ul> </li> <li> <a href="#" >菜单三</a> <ul> <li>内容三</li> <li>内容三</li> <li>内容三</li> </ul> </li> <li> <a href="#" >菜单四</a> </li> </ul> <script type="text/javascript" src=""></script> <script type="text/javascript"> $(function(){ $(".menu li").hover(function(){ $(this).children("ul").show(); },function(){ $(this).children("ul").hide(); }); }); </script> </body> </html>
css部分
*{ padding: 0; margin: 0; } a{ text-decoration: none; color: #000; } ul,li{ list-style: none; } .menu{ margin: 50px auto; width: 500px; height: 35px; background-color: #ccc; text-align: center; line-height: 35px; } .menu li{ float: left; width: 20%; position: relative; } .menu li a{ display: block; } .menu li a:hover{ background-color: burlywood; } .menu li ul{ display: none; position: absolute; left: 0; } .menu li ul li{ width: 100%; margin-top: 2px; background-color: darkgray; } .menu li ul li:hover{ cursor: pointer; background-color: chartreuse; }
以上就是通过css,js,jq三个方式实现简易下拉菜单的写法，有更好的写法欢迎你的指教。希望大家对脚本之家网站的支持！
您可能感兴趣的文章: