您现在的位置是：网站首页> 编程资料编程资料

HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单使用HTML+CSS实现鼠标划过的二级菜单栏的示例纯CSS实现鼠标滑过显示子菜单的二级菜单效果js+css实现圆角二级菜单jQuery CSS 完美兼容的二级菜单css 实现动态二级菜单

2021-09-07 838人已围观

简介通过嵌套的ul li 实现简单的二级菜单兼容IE6-9,谷歌火狐等主流浏览器，示例代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助

复制代码

代码如下:

HTML网页如下：(通过嵌套的

)(兼容IE6-9,谷歌火狐等主流浏览器)

复制代码

代码如下:

网页加载时，需要将所有的菜单项都暂时隐藏，调用相关的JavaScript代码

复制代码

代码如下:

/*网页加载时触发的函数*/
function loadFun() {
//获取

的所有子节点

节点5个
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++) {
//如果碰到主菜单中的

详细的CSS代码如下：

复制代码

代码如下:

鼠标点击触发的JavaScript代码如下：

复制代码

代码如下:

/*点击按钮是触发的事件*/
var arrays = new Array("rule","load","info","window","phone");
function Show(tagId) {
for (var i = 0; i < arrays.length; i++) {
if (arrays[i] == tagId) {
//设置全新的背景颜色
document.getElementById(arrays[i]).parentNode.style.backgroundColor = "RGB(237,237,237)";
document.getElementById(arrays[i]).style.display = "block";
}
else {
//将背景颜色还原
document.getElementById(arrays[i]).parentNode.style.backgroundColor = "RGB(216,216,216)";
document.getElementById(arrays[i]).style.display = "none";
}
}
}

效果图如下：