js、jq、css多方面实现简易下拉菜单功能

效果图预览

一、css实现

超文本标记语言代码部分

！DOCTYPE html html head meta charset=' UTF-8 ' title html CSS下拉菜单/title link rel='样式表type=' text/CSS ' href=' CSS/style。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'/head body ul class='menu '阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '首页/a /li阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '菜单一/a ul li内容一/li li内容一/li li内容一/li /ul /li阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '菜单二/a ul li内容二/li li内容二/li li内容二/li /ul /li阿利href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel菜单三/a ul li内容三/li li内容三/li li内容三/li /ul /li阿利rel='外部nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '菜单四/a /li /ul /body/htmlcss部分

* { padd : 0；保证金： 0；} a { text-decoration : nonecolor: # 000}ul，Li { list-style : none；}.菜单{ margin: 50px auto宽度： 500像素；高度： 35px背景色： # CCC文本对齐：中心；线高： 35px}.菜单li{左侧浮动：宽度： 20%;相对位置：}.菜单李：悬停ul {显示：块；}.菜单阿利{显示：块；}.菜单阿利：悬停{背景色： burlywood}.菜单li ul{显示：无；绝对位置：}.菜单li ul li{宽度： 100%;页边距-top : 2px；背景-颜色：深灰色；}.菜单li ul li:hover{ cursor:指针；背景-彩色：图表重复使用；}二、js实现

超文本标记语言和射流研究…部分（实现方法一)

！DOCTYPE html html head meta charset=' UTF-8 ' title js下拉菜单/title link rel='样式表type=' text/CSS ' href=' CSS/style。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'/head body ul class=' menu ' id=' menu '阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel首页/a /li阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '菜单一/a ul li内容一/li li内容一/li li内容一/li /ul /li阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '菜单二/a ul class='show' li内容二/li li内容二/li li内容二/li /ul /li阿利href=# ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel菜单三/a ul class='hide' li内容三/li li内容三/li li内容三/li /ul /li阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '菜单四/a /li /ul脚本类型=' text/JavaScript '窗口。 onload=function(){ function $(id){ id==' string '的返回类型？文件。getelementbyid(id): id；} var menu_li=$('menu ').getElementsByTagName(' Li ')；for(var I=0；i menu _ li.lengthi ){ menu_li[i].onmouseover=function(){ var ss=this。getelementsbytagname(' ul ')[0]；if(ss！=未定义){ ss。风格。display=' block} } } for(var j=0；j menu _ li.lengthj ){ menu_li[j].onmouseout=function(){ var SSA=this。getelementsbytagname(' ul ')[0]；if(ssa！=未定义){ SSA。风格。显示='无'；} } } }/脚本/正文/html html html和射流研究…部分（实现方法二)

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style * { padd : 0；保证金： 0；}李{列表式：无；向左浮动：} #tabCon { clear:双双；} # Tabcon div { display : none } # Tabcon div。fdiv {显示：块；}/style/head body div id=' TanContainer ' div id=' tab ' ul Li class=' fli '标题一/li li标题二/li li标题三/li li标题四/Li/ul/div div id=' Tabcon ' div class=' fdiv '内容一/div内容二/div内容三/div内容四/div /div /div /body脚本函数$(id){ 0返回类型id=='string '？文件。getelementbyid(id): id；} var EventUtil={ addHandler:函数（元素、类型、处理程序){ if(元素。addevent listener){元素。addevent侦听器(类型、处理程序，假)；} else if(元素。attachevent){元素。attachevent(' on '类型处理程序);} else { element[' on ' type]=handler；} }，removeHandler:函数（元素，类型，处理程序){ if(元素。removeeventlistener){元素。removeeventlistener(类型，处理程序，假)；} else if(元素。独立通风口){元素。独立通风口(' on '类型处理程序);} else { type]上的元素['为null } } } var tab=$(“tab”).getElementsByTagName(' Li ')；var divs=$('tabCon ').getElementsByTagName(' div ')；for(var I=0；一、标签长度；I){ var set=function(){ change(this)；} EventUtil.addHandler(选项卡[i]，'点击'，设置)；//选项卡[i].onclick=function(){ change(this)；} }功能更改{控制台。日志(obj)；for(var I=0；一、标签长度；I){ if(tab[I]==obj){ console。日志(选项卡[I])；//制表符[我]。风格。display=' blockdiv s[I]。风格。display=' block} else {//tab[I]。风格。显示='无'；div s[I]。风格。显示='无'；} } } /script/htmlcss部分

* { padd : 0；保证金： 0；} a { text-decoration : nonecolor: # 000}ul，Li { list-style : none；}.菜单{ margin: 50px auto宽度： 500像素；高度： 35px背景色： # CCC文本对齐：中心；线高： 35px}.菜单li{左侧浮动：宽度： 20%;相对位置：}.菜单阿利{显示：块；}.菜单阿利：悬停{背景色： burlywood}.菜单li ul{显示：无；绝对位置：左： 0；}.菜单li ul li{宽度： 100%;页边距-top : 2px；背景-颜色：深灰色；}.菜单li ul li:hover{ cursor:指针；背景-彩色：图表重复使用；}三、JQ实现

超文本标记语言和日本季刊日本季刊部分

！DOCTYPE html html head meta charset=' UTF-8 ' title js下拉菜单/title link rel='样式表type=' text/CSS ' href=' CSS/style。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'/head body ul class=' menu ' id=' menu '阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel首页/a /li阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '菜单一/a ul li内容一/li li内容一/li li内容一/li /ul /li阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '菜单二/a ul class='show' li内容二/li li内容二/li li内容二/li /ul /li阿利href=# ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel菜单三/a ul class='hide' li内容三/li li内容三/li li内容三/li /ul /li阿利href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '菜单四/a /li /ul脚本类型=' text/JavaScript ' src=' http :/./jq/jquery-1。7 .2 .量滴js/'脚本脚本类型=' text/JavaScript ' $(function(){ $(').菜单李' .悬停(function(){ $(this)).儿童(' ul ').show()；}，function(){ $(this).儿童(' ul ').hide()；});});/script /body/htmlcss部分

* { padd : 0；保证金： 0；} a { text-decoration : nonecolor: # 000}ul，Li { list-style : none；}.菜单{ margin: 50px auto宽度： 500像素；高度： 35px背景色： # CCC文本对齐：中心；线高： 35px}.菜单li{左侧浮动：宽度： 20%;相对位置：}.菜单阿利{显示：块；}.菜单阿利：悬停{背景色： burlywood}.菜单li ul{显示：无；绝对位置：左： 0；}.菜单li ul li{宽度： 100%;页边距-top : 2px；背景-颜色：深灰色；}.菜单li ul li:hover{ cursor:指针；背景-彩色：图表重复使用；}以上就是通过css、js、jq三个方式实现简易下拉菜单的写法，有更好的写法欢迎你的指教。希望大家对我们网站的支持！