js CSS实现模拟华丽的挑选控件下拉菜单效果

本文实例讲述了js CSS实现模拟挑选控件的下拉菜单效果。分享给大家供大家参考。具体如下：

这是一个JS CSS技术实现的挑选控件效果，模拟出来的，比默认的挑选更漂亮，有了这个模板，你修改挑选就更方便了，由此你也可以将其制作成半铸钢钢性铸铁(铸造半钢)下拉菜单，在兼容性方面暂未测试，在IE8下没问题。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-CSS-select-control-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title模拟挑选控件/titlestyle html，body { height :100%；飞越：隐藏；}body，div，form，h2，ul，li { margin:0划水：0;} ul { list-style-type : no；} body { background : # 23384 efont :12 px/1.5 \ 5 FAE \ 8f 6f \ 96 C5 \ 9ed 1；} #搜索，#搜索表单，#搜索。框中，#搜索。选择#搜索a {背景： URL(图片/搜索。jpg)不重复；} #搜索，#搜索。框中，#搜索表单{ height:34px} #搜索{位置：相对宽度宽度：350pxmargin:10px汽车；} #搜索框{背景-位置：右0；} #搜索表单{ background-repeat : repeat-x；背景-位置：0-34px；余量：0 20px 0 40px} #搜索。选择{ float:leftcolor: # fff宽度宽度：190像素宽度：22像素指针：指针；页边距-top :4 px；线高：22 px填充-左侧：10 px背景-位置：0-68px；} #搜索一个{ float:left宽度：80 px高度height:24pxcolor: # 333字母间距：4 px线高：22 px文本对齐：居中；文本装饰：无；背景-位置：0-90px；margin:4px 0 0 10px } #搜索a:hover { color: # f60背景-位置：-80px-90px；} #搜索sub { position : absolutetop :26 pxleft :40 pxcolor : # fff宽度宽度：198像素背景技术# 2b2b2bborder:1px实心# fffdisplay:none} #搜索高度：25px线高：24 px光标：指针指针；填充-左侧：10 px保证金-底部：-1px；边框-底部：1px虚线# fff} #搜索李潜艇。悬停{背景： # 8b b8b}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var ose select=document。getelementsbytagname(' span ')[0]；var oSub=文档。getelementsbytagname(' ul ')[0]；var AlI=Osub。GetElementsBytagname(' Li ')；var I=0；ose select。onclick=function(event){ var style=Osub。风格；风格。显示=样式。display==' block '？none ' : ' block//阻止事件冒泡（事件|| window.event ).cancelBubble=true }；for(I=0；I AlI . len thi){//鼠标划过aLi[i].onmouseover=function(){ this。类名=' hover ' }；//鼠标离开aLi[i].onmouseout=function(){ this。类名=' '；};//鼠标点击aLi[i].onclick=function(){ ose select。innerhtml=this。innerhtml } }文档。onclick=function(){ osub。风格。显示='无'；};};/script/head dydiv id=' search ' div class=' box ' form span class=' select '请选择游戏名称/span a href=' JAVAScript :'搜索/a /form /div ul class='sub' li地下城与勇士/li li魔兽世界（国服)/李莉魔兽世界（台服)/李莉热血江湖/li li大话西游二/li liQQ幻想世界/li /ul/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。