三种方式实现下拉菜单效果
使用3种方式实现下拉菜单效果: html/css 、js方法实现下拉菜单显示隐藏、jquery方法实现下拉菜单显示隐藏
先看效果图
第一种:html/css方式实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>下拉菜单的实现</title> <style type="text/css"> *{margin: 0;padding: 0;} #nav{ background-color:#eee ;width: 600px;height: 48px;margin: 0 auto; } ul{list-style: none;} ul li{ float: left;line-height: 48px;text-align: center;position: relative; } a{text-decoration: none;color: #666;display: block;padding: 0 10px;} a:hover{color:#fff;background-color: #666666;} ul li ul li{float: none;background-color: #eee;margin-top: 2px;} /*使用absolute绝对定位 父类需设置position为relative*/ ul li ul{position: absolute;left: 0;top: 48px;display: none;} ul li ul li a:hover{background-color: cornflowerblue;} /*鼠标经过时显示二级菜单*/ ul li:hover ul{display: block;} </style> </head> <body> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程大厅</a> <ul> <li><a href="#">javasript</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li><a href="#">学习中心</a> <ul> <li><a href="#">javasript</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html>
第二种:js方法实现下拉菜单显示隐藏
1、首先为菜单添加鼠标悬浮、移除事件
<li onmouseover="showsubmenu(this);" onmouseout="hidesubmenu(this);"><a href="#">课程大厅</a> <ul> <li><a href="#">javasript</a></li> <li><a href="#">jquery</a></li> </ul> </li>
2、定义js方法
function showsubmenu(li){ //根据标签名获取对象集合 var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="block"; } function hidesubmenu(li){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="none"; }
第三种:jquery方法实现下拉菜单显示隐藏
作者:fozero
文章出处:https://www.cnblogs.com/fozero
声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
文章出处:https://www.cnblogs.com/fozero
声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步