<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #department { float: left; display: inline; height: 38px; 198px; background: #fff; color: #565656; font-size: 14px; margin-right: 6px; line-height: 38px; position: relative; border: 1px solid #9e9d9d; *top:1px; } #department span { height: 38px; display: block; text-align: left; background: url(../images/down.jpg) no-repeat 170px 15px; cursor: pointer; 188px; overflow: hidden; padding-left: 10px; } #department ul { display: block; list-style: none; position: absolute; 198px; padding: 5px 0px; margin: 0px; overflow: hidden; top: 38px; border: 1px solid #9e9d9d; background-color: #FFF; left: -1px; } #department ul li { height: 20px; line-height: 20px; display: block; text-align: left; } #department ul li a { display: block; height: 20px; line-height:20px; margin: 0 5px; overflow: hidden; padding-left: 7px; text-decoration: none; outline: none } #department ul li a:hover { background: #9FD0E8; } </style> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script> /* window.onload=function(){ function $(id){ return document.getElementById(id); } var oSpan=$('selectTop'); var aUl=$('selectDown'); var aLi=$('selectDown').getElementsByTagName('li'); oSpan.onclick = function(ev){ var ev = ev || window.event; if(aUl.style.display == 'none'){ aUl.style.display = 'block' } else{ aUl.style.display = 'none' } ev.cancelBubble = true; } document.onclick=function(){ if(aUl.style.display == 'block'){ aUl.style.display = 'none' } } for(i=0;i<aLi.length;i++){ aLi[i].onclick=function(){ oSpan.innerHTML = this.getElementsByTagName('a')[0].innerHTML; } } } */ //jquery写法 $(document).ready(function(e) { var aUl=$('#selectDown'); var aLi=$('#selectDown').find('li'); $('#selectTop').bind("click", function(ev){ var ev = ev || window.event; if(aUl.css("display") == 'none'){ aUl.show(); } else{ aUl.css("display","none"); } ev.stopPropagation(); }); $(document).bind("click", function(){ aUl.css("display","none"); }) for(i=0;i<aLi.length;i++){ aLi.eq(i).click( function(){ $('#selectTop').html( $(this).find("a").html() ); }) } }); </script> </head> <body> <div id="department"> <span id="selectTop">选择所在单位</span> <ul id="selectDown" style="display: none;"> <li><a href="javascript:void(0);" id="L_freemail" data="900">合谐医疗</a></li> <li><a href="javascript:void(0);" id="L_freemail" data="101">广物汽贸工会</a></li> <li><a href="javascript:void(0);" id="L_freemail" data="102" >广州市友谊</a></li> <li><a href="javascript:void(0);" id="L_freemail" data="103">中国人寿</a></li> <li><a href="javascript:void(0);" id="L_freemail" data="104">寮步消防队</a></li> <li><a href="javascript:void(0);" id="L_freemail" data="105" >中国人寿金钻健康俱乐部</a></li> <li><a href="javascript:void(0);" id="L_freemail" data="106">四五八医院龙伟</a></li> <li><a href="javascript:void(0);" id="L_freemail" data="107">南粤物流</a></li> </ul> </div> </body> </html>