一个钢性铸铁与射流研究…结合的下拉菜单支持主流浏览器

首先声明：

本人虽然在网前端岗位干了好多年，但无奈岗位对技术要求不高html，css用的比较多，JavaScript自己原创的很少，基本都是复制修改，所以自己真正动手写时，发现基础很不牢固，边学习边实践，收获很大。

效果图：

不废话了，贴码了

1、css代码

复制代码代码如下： a :链接{颜色：白色；文本装饰：无；} a :已访问{ color : white text-装饰： one} a :悬停{ color : white文字-装饰：一个；} a :活动{ color : white文字-装饰：一个；} Li { float : leftisplay : inline背景色： # 003366;宽度宽度：120像素文本对齐：居中；余量margin:2pxpadding:10px 0 5px 0位置：相对；} .limouseover {底色： # 0033 ffcolor:red}。limouseout {底色： # 003366；颜色：黑色；} li ul { display:none宽度宽度：120像素位置：绝对；left :0 to :30 px } Li ul Li { margin 33600 px auto order-top 3:1 px固体# 006699;}

2、JavaScript代码复制代码代码如下：脚本语言=javascript函数菜单(菜单1){ //鼠标移入移出类名切换和子菜单隐藏、显示切换if(文档。getelementbyid(菜单1)){ var menu _ ul=document。getelementbyid(菜单1)；if(menu _ ul。getelementsbytagname(' Li ').长度){ var menu _ Li=menu _ ul。getelementsbytagname(' Li ')；for(菜单_李中的i){ menu_li[i].onmouseover=function(){ this。类名=' limousseover如果(这个。getelementsbytagname(' ul ').长度){这个。getelementsbytagname(' ul ')[0]。风格。display=' block}} menu_li[i].onmouseout=function(){ this。类名=' limousseout如果(这个。getelementsbytagname(' ul ').长度){这个。getelementsbytagname(' ul ')[0]。风格。显示='无'；} } } } } } } } }/script

3、html代码

复制代码代码如下：ul id=menu1 lia href=' '首页/a/li lia href=' '菜单一菜单1/a ul lia href=' '子菜单一子菜单一子菜单一子菜单1/a/li lia href=' '子菜单2/a/li /ul /li lia菜单2/a ul lia href=' '子菜单一子菜单一子菜单一子菜单1/a/li lia href=' '子菜单2/a/Li/ul/Li/ul脚本var菜单1=新菜单(“菜单1”)；/script

说明：

1、考虑到保险商实验所和里页面用的比较多，可以在钢性铸铁前加入#menu1，以对菜单样式进行范围限制。

2、js主要是对鼠标移入和移除事件进行了侦听，对应切换到limouseover和limouseout样式；同时对子菜单的显示属性进行更改，达到显示隐藏的功能。

3、同一个页面可以重复调用，不冲突，html代码中的Java脚本语言代码是调用实例，前面的菜单一为任意变量名，括号内的菜单一为超文本标记语言页面中的身份证。

本例的缺点：

1、菜单里的鼠标悬停、鼠标移出和子菜单里的样式一样，即同一个颜色和字体，没有实现单独设置。

2、由于要兼容Ie6和ie7，所以其中采用位置：绝对的同时，增加了左边的和顶端属性，顶部要根据菜单里的整体高度设定。