HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单

在网页设计中，创建交互式的菜单是提升用户体验的关键部分。本示例中，我们通过HTML、CSS和JavaScript来实现一个兼容IE6-9以及谷歌、火狐等主流浏览器的二级菜单。这种二级菜单通常用于网站的导航，允许用户在不离开当前页面的情况下访问更深层次的内容。 HTML结构是实现二级菜单的基础。`<ul>`和`<li>`元素被用来创建列表，其中嵌套的`<ul>`表示二级菜单。每个一级菜单项（`<li>`）包含一个链接（`<a>`），点击这个链接时会显示或隐藏对应的二级菜单。例如： ```html <li><a href="#" onclick="Show('rule')">相关法规</a> <ul id="rule"> <li><a href="#">Adobe Reader</a></li> ... </ul> </li> ``` 这里，`onclick`属性触发JavaScript函数`Show('rule')`，用于控制`id`为`rule`的二级菜单的显示与隐藏。 接下来，CSS用于定义菜单的样式。主要的CSS规则包括： 1. 清除默认的`margin`和`padding`，以避免浏览器自带的样式影响布局。 2. 设置`#menu`的宽度和高度，以及背景色，以创建一个固定的边栏区域。 3. 使用`list-style-type:none`移除列表项前的圆点。 4. 调整`#menu ul li`的宽度以填充整个边栏，同时消除左右的间隙。 5. 通过CSS的`:hover`选择器，可以实现鼠标悬停在一级菜单项上时的视觉效果，例如改变背景色或者显示二级菜单。 JavaScript部分，`loadFun`函数在网页加载完成后自动执行，隐藏所有二级菜单。它通过遍历一级菜单的子节点，找到`<ul>`标签并将它们的`display`属性设为`none`，实现初始的隐藏效果。例如： ```javascript function loadFun() { var array = document.getElementsByTagName("ul").item(0).childNodes; for (var i = 0; i < array.length; i++) { var childnodes = array[i].childNodes; for (var j = 0; j < childnodes.length; j++) { if (childnodes[j].tagName == "UL") { childnodes[j].style.display = "none"; } } } } ``` `Show`函数用于控制二级菜单的显示和隐藏，这可以通过改变`display`属性来实现。这个函数可能如下所示： ```javascript function Show(id) { var submenu = document.getElementById(id); if (submenu.style.display === "none") { submenu.style.display = "block"; } else { submenu.style.display = "none"; } } ``` 这个例子展示了如何使用HTML、CSS和JavaScript创建一个兼容多种浏览器的二级菜单。通过合理的HTML结构、CSS样式和JavaScript交互，我们可以构建出响应用户操作、具有良好视觉效果的网页导航菜单。这样的技术在现代网页开发中至关重要，能为用户提供直观、易用的界面，提高网站的可用性和用户体验。