transition: all .5s ease;
position:absolute;
right:5px;
top:14px;
}
.select_default.rotate:after{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
.select_item{
margin:0;
padding:0;
display:none;
list-style:none;
}
.select_item li{
width:80px;
height:32px;
line-height:32px;
padding:0 10px;
border:solid 1px #ccc;
border-top:none;
}
.select_item li.hover{
background:#666;
color:#fff;
}
最后使用jq实现下拉
$(document).ready(function(){
var $sel = $(“.select”),
$sel_default = $(“.select_default”),
$sel_item = $(“.select_item”),
$sel_item_li = $(“.select_item li”)
$sel_default.text($(“.select_item li:first”).text());
//alert();
$sel.hover(function(){
$sel_item.show();
$sel_default.addClass(“rotate”);
$sel_item_li.hover(function(){
$index = $sel_item_li.index(this);
//alert($index)
$sel_item_li.eq($index).addClass(“hover”);
},function(){
$sel_item_li.removeClass(“hover”);
})
},function(){
$sel_item.hide();
$sel_default.removeClass(“rotate”);
});
$sel_item_li.click(function(){
$sel_default.text($(this).text());
$sel_item.hide();
});
});
资源下载
以上便是全部，但是我感觉jq好像不够优化，我是在经过默认展示框的时候，下拉ul显示，然后在写经过下拉的菜单的时候添加css特效。。但是怎么觉得不够优化？？
然后我们用这种方式来美化的话，我在想传值的话是不是也只能用js吧值赋值到地址上跳转呢？？还是说有其他的好方法？？用隐藏域的话能行吗？？具体又要怎么办呢？？？以上这俩问题，都还没具体实践！
