<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nav</title>
<style type="text/css">
<!--
ul,li,dl,dd{margin:0;padding:0;}
li{list-style-type:none;}
dl{text-indent:2em;}
-->
</style>
<script type="text/javascript">
function hiddenAllUL(){
var nav2Id = document.getElementById("nav2");
var arryUL = nav2Id.getElementsByTagName("ul");
for(i=0;i<arryUL.length;i++){
arryUL[i].style.display = "none";
}
}
function liClickEvent(emid){
hiddenAllUL();
var obj = document.getElementById(emid);
obj.style.display = "block";
}
window.onload = function(){
liClickEvent("first");
}
</script>
</head>
<body>
<ul id="nav">
<li onclick="liClickEvent('first');">aaa</li>
<li onclick="liClickEvent('second');">bbb</li>
<li onclick="liClickEvent('third');">ccc</li>
</ul>
<dl id="nav2">
<dd>
<ul id="first">
<li>111</li>
</ul>
</dd>
<dd>
<ul id="second">
<li>222</li>
</ul>
</dd>
<dd>
<ul id="third">
<li>333</li>
</ul>
</dd>
</dl>
</body>
</html>
思路：1.先把所有的二级菜单隐藏起来.
2.把一级菜单和二级菜单通过id对应起来.
3.一级菜单onclick事件触发对应的二级菜单显示出来.
4.加载后默认的第一个一级菜单对应的二级菜单显示出来.
分享到：
相关推荐
二级菜单! 很值得下载看看!资源免费,大家分享!!
几个月前初学前端时挖的坑，把二级菜单设计得和一级菜单在DOM结构上没啥关系，导致想要鼠标悬浮一级菜单即可显示该一级菜单对应的二级菜单，移出则显示当前页所在一级菜单所对应的二级菜单列表不好用CSS实现，现在用...
js实现的二级菜单联动。选择的是省市联动
此工程文件包含了菜单以及二级菜单，托盘，样式，好友列表，窗口等基本操作；欢迎关注我博客:http://blog.csdn.net/ly305750665/article/details/53749781
SQLite数据库的使用，以及如何通过双ListView实现二级菜单。
recyclerview优化以及二级菜单展开，recyclerview优化以及二级菜单展开，recyclerview优化以及二级菜单展开
wpf自定义漂亮的二级菜单,数据加载方便，可扩展，适合企业及项目
用于网站栏目二级子菜单的下拉 二级菜单 二级下拉菜单 栏目二级子菜单
]但在《CSS二级菜单》中，如果一级菜单中的超链接是#，那么只要单击该一级菜单，那么与这个一级菜单对应的二级菜单就会一直显示在网页中，不能隐藏，是一个小小的bug。后来仔细的想了一想，其实，无论是什么样的二级...
用注册表方式对Windows系统桌面右键菜单增加新菜单，及增加二级新菜单。
简单网页二级菜单的实现
js完善的二级菜单,通过js实现的二级折叠菜单.更加的方便,用着很舒服
android 二级菜单、双ListView 仿美团、购物二级菜单
二级菜单
Access数据库-二级下拉菜单制作
左侧下拉二级菜单代码左侧下拉二级菜单代码左侧下拉二级菜单代码左侧下拉二级菜单代码左侧下拉二级菜单代码左侧下拉二级菜单代码
当鼠标悬浮时显示二级菜单，这种类似的效果，想必大家在浏览网页时经常会遇到吧，下面有个示例，大家可以看看
左侧导航悬浮二级菜单是一款简单易用的jquery左侧固定导航，支持右侧二级导航。
鼠标移到菜单上弹出二级菜单特效,利用timeout原来，以及 mouseout 和 mousehover 的先后原来。 只是一个简单 demo，未做其他处理。
头部超级菜单导航-鼠标放上去显示二级菜单