结合CSS和js的下拉菜单支持主流浏览器。

首先，声明：

虽然我已经在Web前端多年，但工作不高的技术requirements.html，CSS用的比较多的是，Javaｓｃｒｉｐｔ是非常原始，基本上是修改和复制。所以，当你真正写作的时候，你会发现基础不是很牢固，在学习和实践的过程中，你得到了很多。

设计素描 uff1a
没有废话。

1，CSS代码

复制代码代码如下所示：

答：链接{颜色：白色；文字装饰：无；}

答：访问{颜色：白色；文字装饰：无；}

答：悬停{颜色：白色；文字装饰：无；}

答：活动{颜色：白色；文字装饰：无；}

李{浮动：左；显示：内联；背景颜色：# 003366；宽度：120px；文本对齐：中心；保证金：2px；填充：10px 0 5px 0；位置：相对；}

。limouseover {背景颜色：# 0033ff；颜色：红色；}

。limouseout {背景颜色：# 003366；颜色：黑色；}

李UL {显示：无；宽度：120px；位置：绝对；左：0；最高：30px；}

Li UL li {保证金：为0px auto；边境上：1px solid # 006699；}
2，Javaｓｃｒｉｐｔ代码

复制代码代码如下所示：
功能菜单（menu1）{

鼠标移入移出 / /类名切换子菜单，隐藏显示开关。

如果（document.getelementbyid（menu1））{

无功menu_ul = document.getelementbyid（menu1）；

如果（menu_ul.getelementsbytagname（礼）。长度）{

无功menu_li = menu_ul.getelementsbytagname（礼）；

对（我在menu_li）{

我menu_li { }。onmouseover =功能（{这个类名=）limouseover；如果（this.getelementsbytagname（UL）。长度）{ this.getelementsbytagname（UL）{ 0 }。风格。显示为块；} }

我menu_li { }。onmouseout=功能（{这个类名=）limouseout；如果（this.getelementsbytagname（UL）。长度）{ this.getelementsbytagname（UL）{ 0 }。风格。显示为无；} }

}

}

}

}

3，HTML代码

复制代码代码如下所示：
首页

菜单1菜单1
子1子1子1子1

子菜单2
菜单2
子1子1子1子1

子菜单2
解释uff1a

1。考虑到更多的UL和李的页面时，你可以在CSS的限制范围# menu1添加菜单风格。

2、JS主要监听鼠标事件的迁移和去除，并切换到limouseover和limouseout风格。同时，它改变子菜单的显示属性来实现隐藏函数。

3，可以重复调用同一页。它不冲突。在HTML代码的Javaｓｃｒｉｐｔ代码称为例，前menu1任何变量的名称，并在括号中是menu1 ID的HTML页面。

这个例子的缺点：

1、鼠标悬停、怪、以及菜单李李子是相同的风格，即，相同的颜色和字体，并没有单独设置的实现。

2，因为它与IE6和IE7，兼容的位置：绝对的Left和Top属性添加。顶部应该根据菜单李的高度设置。