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);
    }
posted @ 2014-07-24 09:23  诺先森  阅读(313)  评论(0编辑  收藏  举报