复制代码代码如下:
HTML网页如下：(通过嵌套的
复制代码代码如下:
网页加载时，需要将所有的菜单项都暂时隐藏，调用相关的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";
}
}
}
}
详细的CSS代码如下：
复制代码代码如下:
html,body
{
width:100%;
height:100%;
margin:0px;
padding:0px;
border-style:none;
}
#menu
{
width:225px;
height:320px;
background-color:RGB(216,216,216);
padding:0px;
margin:0px;
}
#menu ul
{
width:225px;
list-style-type:none;
padding:0px;
margin:0px;
}
#menu ul li
{
width:225px;
}
#menu ul li a
{
display:block;
color:Gray;
text-align:left;
text-decoration:none;
padding:10px 0px 10px 30px;
font-size:14px;
}
#menu ul li a:hover
{
color:Orange;
text-align:left;
text-decoration:none;
padding:10px 0px 10px 30px;
font-size:14px;
}
#menu ul li ul
{
list-style-type:none;
}
#menu ul li ul li
{
width:225px;
}
#menu ul li ul li a
{
display:block;
padding:6px 0px 6px 60px;
text-align:left;
text-decoration:none;
font-size:12px;
}
#menu ul li ul li a:hover
{
padding:6px 0px 6px 60px;
text-align:left;
text-decoration:none;
font-size:12px;
color:Black;
background-color:#CD2626;
}
鼠标点击触发的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";
}
}
}
效果图如下：
