很棒的自定义CSS下拉菜单

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>张洪伟的自定义下拉菜单</title>
<style type="text/css">
<!--
.Select a {font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
.Select A:link {color:#24210c;text-decoration:none}
.Select A:visited {color:#414141;text-decoration:none}
.Select A:hover {color:#006600;text-decoration:none}
A img{border:none}
.Select {width:100px;height:20px;background-image: url(/jscss/demoimg/200906/select_bg.gif);background-repeat: repeat-x;border: 1px solid #bdbcbd;display: block;}
.Select .Select_val {line-height: 18px;float: left;padding-top: 0px !important;padding-top: 2px;padding-left: 4px;width: 72px;}
.Select .sm_pic {padding-top: 6px;padding-left:3px !important;padding-left:0px;}
.sel_a {width:100%; height:100%; float:left}
.Option {border: 1px solid #bdbcbd;position: absolute;z-index: 100;display: none;}
.Option a:link {width: 100%;float: left;line-height: 20px;background-color: #FFFFFF;}
.Option a:visited {line-height: 20px;width: 100%;float: left;background-color: #FFFFFF;}
.Option a:hover {width: 100%;float: left;line-height: 20px;color: #FFFFFF;background-color: #003399;}
-->
</style>
</head>
<script language="javascript">
function $(obj){return document.getElementById(obj)}
function findPosition(oElement){var x2 = 0;var y2 = 0;var width = oElement.offsetWidth;var height = oElement.offsetHeight;if( typeof(oElement.offsetParent) != 'undefined' ){for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {posX += oElement.offsetLeft; posY += oElement.offsetTop;}x2 = posX + width;y2 = posY + height;return [ posX, posY ,x2, y2];} else{x2 =oElement.x + width;y2 = oElement.y + height;return [ oElement.x, oElement.y, x2, y2];}}
function loadOption(OptArr,OptName,box){
$(box).innerHTML = "<div id=\""+OptName+"_Select\" class=\"Select\"><a href=\"javascript:void(0)\" onFocus=\"block_Opt(this,'"+OptName+"')\" onBlur=\"none_Opt('"+OptName+"')\" class=\"sel_a\"><span id=\""+OptName+"_Select_val\" class=\"Select_val\">Load...</span><input name=\""+OptName+"\" type=\"hidden\" id=\""+OptName+"\"/><img src=\"http://www.0566hr.com/sele.gif\" width=\"17\" height=\"9\" align=\"absbottom\" class=\"sm_pic\" /></a><div id=\""+OptName+"_Option\" class=\"Option\"></div></div>";
var i = 0;
var opt_Html = "";
	for(opt in OptArr){
		if(OptArr[opt][2])i = opt;
		$(OptName).value = OptArr[i][1];
		opt_Html+="<a href=\"javascript:void(0)\" onmousedown=\"setOptval('"+OptName+"','"+OptArr[opt]+"')\">&nbsp;"+OptArr[opt][0]+"</a>";
	}
	!document.all?$(OptName+'_Select_val').textContent = OptArr[i][0]:$(OptName+'_Select_val').innerText = OptArr[i][0];
	$(OptName+'_Option').innerHTML = opt_Html;
}
function block_Opt(obj,opt){
	var w = findPosition(obj);
	$(opt+'_Option').style.top = w[1]+22+"px";
	$(opt+'_Option').style.left = w[0]+"px";
	$(opt+'_Option').style.width = w[2]-w[0]+"px";
	$(opt+'_Option').style.display = 'block';
}
function none_Opt(opt){setTimeout("$('"+opt+"_Option').style.display='none'",200);}
function setOptval(opt,Oarr){
Oarr = Oarr.split(',');
!document.all?$(opt+'_Select_val').textContent = Oarr[0]:$(opt+'_Select_val').innerText = Oarr[0];
$(opt).value = Oarr[1];
}
/*
使用说明
loadOption([1],[2],[3]);
[1]是生成下拉列表值的数组 Array(Array(名称，值，是否选中[ture]or[false]),Array(名称，值，是否选中),......);
[2]隐藏域所使用的名称，提交时可以用它来获取隐藏域的值；
[3]要显示下拉菜单的网页元素ID；
例子：
<div id="box"></div>
script标签
var arr = new Array();
arr[0] = new Array('标题一','值1',false);
arr[1] = new Array('标题二','值2',true);
arr[2] = new Array('标题三','值3',false);
loadOption(arr,"inputname","box");
script结束标签
*/
</script>
<body>
<span id="box1" style="margin:10px; float:left"></span>
<span id="box2" style="margin:10px; float:left"></span>
<span id="box3" style="margin:10px; float:left"></span>
<span id="box4" style="margin:10px; float:left"></span>
<script language="javascript">
var SelArr = new Array();
SelArr[0] = new Array("中文歌曲","CM",false);
SelArr[1] = new Array("英文歌曲","EM",false);
SelArr[2] = new Array("源码爱好","RM",false);
SelArr[3] = new Array("韩文歌曲","HM",false);
SelArr[4] = new Array("乡村经典","EDM",true);
SelArr[5] = new Array("摇滚音乐","ROCKM",false);
SelArr[6] = new Array("流行音乐","HOTM",false);
SelArr[7] = new Array("古典音乐","OLDM",false);
SelArr[8] = new Array("爵士乐","JM",false);

var SelArr2 = new Array();
SelArr2[0] = new Array("安徽","AH",false);
SelArr2[1] = new Array("上海","SH",false);
SelArr2[2] = new Array("湖北","HB",false);
SelArr2[3] = new Array("浙江","ZJ",false);
SelArr2[4] = new Array("江西","JX",false);
SelArr2[5] = new Array("蒙古","MG",false);
SelArr2[6] = new Array("广东","GD",false);
SelArr2[7] = new Array("福建","FJ",false);
SelArr2[8] = new Array("天津","TJ",false);

var SelArr3 = new Array();
SelArr3[0] = new Array("周杰伦","ZJL",false);
SelArr3[1] = new Array("王力宏","WLH",true);
SelArr3[2] = new Array("孙楠","SN",false);
SelArr3[3] = new Array("孙燕姿","SYZ",false);
SelArr3[4] = new Array("阿信","AX",false);
SelArr3[5] = new Array("蔡依林","CYL",false);
SelArr3[6] = new Array("张信哲","ZXZ",false);
SelArr3[7] = new Array("韩红","HH",false);
SelArr3[8] = new Array("林俊杰","LJJ",false);

var SelArr4 = new Array();
SelArr4[0] = new Array("法国","FG",false);
SelArr4[1] = new Array("英国","YG",false);
SelArr4[2] = new Array("美国","MG",false);
SelArr4[3] = new Array("中国","ZG",false);
SelArr4[4] = new Array("德国","DG",false);
SelArr4[5] = new Array("俄罗斯","ELS",false);
SelArr4[6] = new Array("意大利","YDL",false);
SelArr4[7] = new Array("澳大利亚","ADLY",false);
SelArr4[8] = new Array("埃及","AJ",false);
SelArr4[9] = new Array("瑞士","RS",false);
SelArr4[10] = new Array("罗马","LM",false);
SelArr4[11] = new Array("巴西","BX",false);
SelArr4[12] = new Array("巴基斯坦","BJST",true);
SelArr4[13] = new Array("新西兰","XXL",false);
SelArr4[14] = new Array("韩国","HG",false);
SelArr4[15] = new Array("日本","RB",false);
SelArr4[16] = new Array("朝鲜","CX",false);
loadOption(SelArr,"music","box1");
loadOption(SelArr2,"city","box2");
loadOption(SelArr3,"s
上一个：深灰色大按钮式的CSS导航条
下一个：鼠标划过变阴影的CSS菜单
更多图片编程知识: