js代码实现下拉菜单【推荐】
效果：
js代码：
<script type="text/javascript"> function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName("ul")[0] ;//获取 subMenu.style.display = " block "; } function HideSub(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = " none "; } </script>
css样式：
*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}//ie7显示宽度的兼容性 设置width 而不用padding的自适应
a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}
ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
ul li ul{ display:none;}
html代码
<div id="nav"> <ul> <li><a href="#">首页</a></li> <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" ><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">Html/CSS</a></li> </ul> </li> <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" ><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">实例练习</a></li> <li><a href="#">问与答</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍JS实现的Select三级下拉菜单代码，包括了JS实现的Select三级下拉菜单代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的Select三级下拉菜单。分享给大家供大家参考。具体如下： 这里使用js实现Select三级下拉菜单，比如全国省市城市选择、数码类产品分类、人才类别选择等，都比较具有代表性，在表单中容易使用Select下拉列表菜单供用户选择，当然，自己
-
本文向大家介绍JS组件Bootstrap实现下拉菜单效果代码，包括了JS组件Bootstrap实现下拉菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。 如果您想要单独引用该插
-
本文向大家介绍Bootstrap下拉菜单Dropdowns的实现代码，包括了Bootstrap下拉菜单Dropdowns的实现代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Bootstrap下拉菜单的具体代码，供大家参考，具体内容如下 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery实现下拉菜单的实例代码，包括了jQuery实现下拉菜单的实例代码的使用技巧和注意事项，需要的朋友参考一下 基本效果是这样的~~ 以上所述是小编给大家介绍的jQuery实现下拉菜单的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍js实现select下拉框菜单，包括了js实现select下拉框菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现select下拉框菜单的详细代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html> 如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。 以上就是js实
-
本文向大家介绍js实现下拉菜单效果，包括了js实现下拉菜单效果的使用技巧和注意事项，需要的朋友参考一下 效果图： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！