javascript隐藏下拉菜单的方法：首先创建一个“demo.html”和“demo.css”；然后创建一个“demo.js”；最后通过“function hideSubMenu(li) {...}”实现隐藏即可。
本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
javascript如何隐藏下拉菜单？
demo.html
<!DOCTYPE html>
<html lang=en>
<head>
<Meta charset=UTF-8>
<title>实现下拉菜单效果</title>
<link rel=stylesheet type=text/css href=demo.css>
<script type=text/javascript src=demo.js></script>
</head>
<body>
<p id=nav>
<ul>
<li><a href=#>首页</a></li>
<li onmouSEOver=displaySubMenu(this) onmouSEOut=hideSubMenu(this)><a href=#>课程大厅</a>
<ul>
<li><a href=#>JavaScript</a></li>
<li><a href=#>Html/CSS</a></li>
</ul>
</li>
<li onmouSEOver=displaySubMenu(this) onmouSEOut=hideSubMenu(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>
</p>
</body>
</html>demo.js
function displaySubMenu(li) { var subMenu = li.getElementsByTagName(ul)[0]; subMenu.style.display = block; } function hideSubMenu(li) { var subMenu = li.getElementsByTagName(ul)[0]; subMenu.style.display = none; }
demo.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;}
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;}效果：
推荐学习：《javascript高级教程》
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
