时间:2021-07-01 10:21:17 帮助过:76人阅读
效果图预览
一 、css实现
html代码部分
css部分
二、js实现
html和js部分(实现方法一)
html和js部分(实现方法二)
css部分
三、JQ实现
html和jq部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS下拉菜单</title> <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> </head> <body> <ul class="menu" id="menu"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜单一</a> <ul> <li>内容一</li> <li>内容一</li> <li>内容一</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜单二</a> <ul class="show"> <li>内容二</li> <li>内容二</li> <li>内容二</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜单三</a> <ul class="hide"> <li>内容三</li> <li>内容三</li> <li>内容三</li> </ul> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜单四</a> </li> </ul> <script type="text/javascript" src="../../jq/jquery-1.7.2.min.js"></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; }
【相关推荐】
1. 特别推荐:“php程序员工具箱”V0.1版本下载
2. 免费html在线视频教程
3. php.cn原创html5视频教程
以上就是实现简单的下拉菜单功能的三种方法的详细内容,更多请关注Gxl网其它相关文章!