<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ul+jquery实现下拉选择框</title>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
ul{padding: 0;margin: 0;}
li{list-style: none;}
.search-box{width: 325px;height: 35px;line-height: 35px;border: 1px solid #2F889A;border-radius: 3px;margin: 0 auto;}
.select-box{float: left;position: relative;}
.search-box span{padding-left: 15px;width: 45px;display: block;background-color: #2F889A;color: #fff;}
.search-box input{float: left;width: 155px;border: 0;height: 33px;line-height: 35px;outline: 0;}
.search-box button{width: 85px;background: #2F889A;color: #fff;border: 0;outline: 0;cursor: pointer;height: 35px;line-height: 35px;float: right;}
.select-box ul{display: none;position: absolute;left: -1px;top: 33px;width: 59px;text-align: center;border: 1px solid #2F889A;}
.select-box ul li{display: block;padding: 0 5px;}
.change{background-color: #2F889A;color: #fff}
</style>
<script>
$(function(){
$(".select-box").hover(function(){
$(this).children("ul").stop().show();
},function(){
$(this).children("ul").stop().hide();
});
$(".select-box").children('ul').find("li:not(:last)")
.mousemove(function(){
$(this).addClass('change').siblings('').removeClass('change');
}).click(function(){
$(this).parent().prev().text($(this).html());
$(this).parent().css('display','none');
});
});
</script>
</head>
<body>
<form class="search-box">
<div class="select-box">
<span>选择</span>
<ul>
<li>微博</li>
<li>产品</li>
<li>资讯</li>
<li>推荐</li>
<li>更多>></li>
</ul>
</div>
<input type="text"><button>搜索</button>
</form>
</body>
</html>
ul+jquery自定义下拉选择框的相关教程结束。
