首页 > 代码库 > DIV模拟的下拉框特效

DIV模拟的下拉框特效

CSS:

<style type="text/css">     body, ul, li     {         margin: 0;         padding: 0;         font-size: 13px;     }     ul, li     {         list-style: none;     }     #divselect     {         width: 186px;         margin: 80px auto;         position: relative;         z-index: 10000;     }     #divselect cite     {         width: 150px;         height: 24px;         line-height: 24px;         display: block;         color: #807a62;         cursor: pointer;         font-style: normal;         padding-left: 4px;         padding-right: 30px;         border: 3px solid #333333;         background: url(xjt.png) no-repeat right center;     }     #divselect ul     {         width: 184px;         border: 1px solid #333333;         background-color: #ffffff;         position: absolute;         z-index: 20000;         margin-top: -1px;         display: none;     }     #divselect ul li     {         height: 24px;         line-height: 24px;     }     #divselect ul li a     {         display: block;         height: 24px;         color: #333333;         text-decoration: none;         padding-left: 10px;         padding-right: 10px;     }     #divselect ul li a:hover     {         background-color: #CCC;     }     p     {         margin: 10px auto;         width: 920px;     }     #n     {         margin: 10px auto;         width: 920px;         border: 1px solid #CCC;         font-size: 12px;         line-height: 30px;     }     #n a     {         padding: 0 4px;         color: #333;     } </style> 

HTML:

<form id="form1"action="" method="post"><div id="divselect" class="divselect">      <cite>请选择特效分类</cite>      <ul>         <li><a href="javascript:;" selectid="1">导航菜单</a></li>         <li><a href="javascript:;" selectid="2">下拉select效果</a></li>         <li><a href="javascript:;" selectid="3">select模拟</a></li>         <li><a href="javascript:;" selectid="4">DIVCSS5特效</a></li>         <li><a href="javascript:;" selectid="5">jquery 下拉特效</a></li>      </ul>  </div>  <br />  <div id="divselect" class="divselect1">      <cite>请选择特效分类</cite>      <ul>         <li><a href="javascript:;" selectid="6">导航</a></li>         <li><a href="javascript:;" selectid="7">下拉</a></li>         <li><a href="javascript:;" selectid="8">模拟</a></li>         <li><a href="javascript:;" selectid="9">特效</a></li>         <li><a href="javascript:;" selectid="10">下拉特效</a></li>      </ul>  </div>  <input name="" value="" id="inputselect"/> //获取的数据</form><input type="button" value="get" onclick="get()" />

JS:

$(function(){    $.divselect(".divselect", "#inputselect");    $.divselect(".divselect1", "#inputselect");});function get() {        var dd = document.getElementById("inputselect");        alert(dd.value);    }