css实现div下拉菜单,JS+DIV+CSS实现仿表单下拉列表效果

本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下：

JS+DIV+CSS实现仿表单下拉列表效果，是完全用CSS技术再配合JS实现的效果，用来代替传统的Select下拉框，虽然目前来说，此代码还有些粗糙，但对于美化列表的样式来说，可能以后会更方便，要比Select方便的多。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DIV+CSS+JS仿下拉表单

function $$$$$(_sId){

return document.getElementById(_sId);

}

function hide(_sId)

{$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}

function pick(v) {

document.getElementById('am').value=v;

hide('HMF-1')

}

function bgcolor(id){

document.getElementById(id).style.background="#F7FFFA";

document.getElementById(id).style.color="#000";

}

function nocolor(id){

document.getElementById(id).style.background="";

document.getElementById(id).style.color="#788F72";

}

*{margin:0px; padding:0px;}

body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}

.cur{cursor:pointer; display:block;color:#788F72;width:146px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}

.am{border: 0px;color:#788F72;cursor: pointer;background:#fff url('0.gif') no-repeat; width: 150px;height: 19px;margin:10px 0px 0px 10px; padding:3px 0px 0px 2px;}

.bm{border: 1px #999999 solid ;width: 148px; margin-left:10px;}

ASP

PHP

JSP

ASP.NET

JAVA

DELPHI

希望本文所述对大家的javascript程序设计有所帮助。