javascript实现控制的多级下拉菜单
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript实现控制的多级下拉菜单,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1981字,纯文字阅读大概需要3分钟。
内容图文
![javascript实现控制的多级下拉菜单](/upload/InfoBanner/zyjiaocheng/358/9482b3ab56d4430eb41ae170078ce8db.jpg)
最近身体不适,所以没能如期的更新,抱歉。这里直接把代码贴上,如果有不明白的地方,留言就行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>下拉菜单</title> <meta http-equiv="content-Type" content="text/html;charset=utf-8"> <style type="text/css"> .navi ul { padding: 0; list-style-type: none; } .navi ul li { text-align: center; float: left; position: relative; width: 200px; background-color: #0F8CFF; } a { color: #086808; text-decoration: none; } .navi ul li a { display: block; border: 1px solid #fff; } .navi ul li ul { display: none; left: 0; } .navi ul li ul li ul{ position: absolute; left:200px; top: 0; } .navi ul li:hover ul a { color: yellow; } </style> <script type="text/javascript"> function showNextMenu(obj){ var nextMenu = obj.getElementsByTagName("ul")[0]; nextMenu.style.display = "block"; } function hideNextMenu(obj){ var nextMenu = obj.getElementsByTagName("ul")[0]; nextMenu.style.display = "none"; } </script> </head> <body> <div class="navi"> <ul > <li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);"> <a href="javascript:;" >游戏</a> <ul> <li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);"> <a href="javascript:;" >传奇</a> <ul> <li> <a href="javascript:;" >1</a> </li> <li> <a href="javascript:;" >2</a> </li> <li> <a href="javascript:;" >3</a> </li> </ul> </li> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> </ul> </div> </body> </html>
效果图如下:
以上所述就是本文的全部内容了,希望大家能够喜欢。
内容总结
以上是互联网集市为您收集整理的javascript实现控制的多级下拉菜单全部内容,希望文章能够帮你解决javascript实现控制的多级下拉菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。