基于CSS与JavaScript实现兼容IE6/7的下拉菜单

CSS与JS下拉菜单实现概述

首先声明：

尽管本人在Web前端领域工作多年，但所在岗位对技术深度的要求相对有限。日常工作中主要使用HTML和CSS，JavaScript多用于修改他人代码，原创较少。因此，在尝试独立编写代码时，发现自身基础不够扎实。通过边学习边实践，获得了显著的进步。

效果图：

接下来直接展示代码实现。

CSS样式定义

1、CSS代码部分

a:link{color:white;text-decoration:none;}
a:visited{color:white;text-decorative:none;}
a:hover{color:white;text-decorative:none;}
a:active{color:white;text-decorative:none;}
li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}
.limouseover{background-color:#0033ff;color:red;}
.limouseout{background-color:#003366;color:black;}
li ul{display:none;width:120px;position:absolute;left:0;top:30px;}
li ul li{margin:0px auto;border-top:1px solid #006699;}

JavaScript交互逻辑

2、JavaScript代码部分

<script language=javascript>
function menu(menu1){
//鼠标移入移出classname切换和子菜单隐藏、显示切换。
if (document.getElementById(menu1)){
var menu_ul=document.getElementById(menu1);
if (menu_ul.getElementsByTagName("li").length){
var menu_li=menu_ul.getElementsByTagName("li");
for (i in menu_li){
menu_li[i].onmouseover=function(){this.className="limouseover";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="block";}}
menu_li[i].onmouseout=function(){this.className="limouseout";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="none";}}
} 
} 
} 
} 
</script>

HTML结构构建

3、HTML代码部分

<ul id=menu1>
<li><a href="">首页</a></li>
<li><a href="">菜单1菜单1</a>
<ul>
<li><a href="">子菜单1子菜单1子菜单1子菜单1</a></li>
<li><a href="">子菜单2</a></li>
</ul>
</li>
<li><a href="">菜单2</a>
<ul>
<li><a href="">子菜单1子菜单1子菜单1子菜单1</a></li>
<li><a href="">子菜单2</a></li>
</ul>
</li>
</ul>

<script>var menu1=new menu("menu1");</script>

功能说明与局限性分析

说明：

1、考虑到ul和li在页面中应用广泛，建议在CSS选择器前添加#menu1，以限制菜单样式的生效范围，避免影响其他列表。

2、JavaScript主要监听鼠标移入和移出事件，切换对应的limouseover和limouseout样式类；同时修改子菜单的display属性，实现显示与隐藏功能。

3、该方案支持在同一页面多次调用，互不冲突。HTML代码中的JavaScript部分为调用示例，前面的menu1为任意变量名，括号内的menu1对应HTML页面中菜单容器的id。

本例的缺点：

1、菜单项li的mouseover、mouseout事件与子菜单li的样式相同，即颜色和字体一致，未能实现独立设置不同样式的功能。

2、为了兼容IE6和IE7，代码中使用了position:absolute定位，并增加了left和top属性。其中top值需根据菜单项的整体高度进行设定。