<!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>