一张背景图片而已和jquery控制下拉收缩 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <style>
.search_all_site .my_frs {
    background: url("http://www.vapee.com/theme/img/search_haoyou.png") no-repeat scroll left 0 transparent;
    border: 0 none;
    color: #888888;
    float: left;
    font-family: Arial;
    height: 22px;
    line-height: 22px;
    margin: 0;
    padding: 0 3px 0 8px;
    width: 82px;
}
.search_all_site .my_frs_search {
    background: url("http://www.vapee.com/theme/img/search_haoyou.png") no-repeat scroll right 0 transparent;
    border: 0 none;
    cursor: pointer;
    float: left;
    height: 22px;
    margin: 0;
    width: 24px;
}
.search_all_site .search_select_top {
    background: url("http://www.vapee.com/theme/img/search_haoyou.png") no-repeat scroll -20px 0 transparent;
    border-right: 1px solid #CCCCCC;
    color: #999999;
    float: left;
    height: 22px;
    margin: 0;
    position: relative;
    width: 45px;
}
.search_all_site .search_select_top span {
    background: url("http://www.vapee.com/theme/img/top_ss_down.png") no-repeat scroll 0 8px transparent;
    color: #999999;
    display: block;
    height: 22px;
    line-height: 22px;
    padding-left: 12px;
}
.search_all_site .search_frs_ul {
    background-color: #FFFFFF;
    border: 1px solid #CBCBCB;
    display: none;
    position: absolute;
    top: 21px;
    width: 44px;
    z-index: 9999;
}
.search_all_site .search_frs_ul li {
    clear: both;
    height: 22px;
    line-height: 22px;
    text-align: center;
    width: 44px;
}
.search_all_site .search_frs_ul li:hover {
    background-color: #EEEEEE;
}
ul, li, ol {
    list-style: none outside none;margin:0px;padding:0px;
}
 </style><span class="search_all_site">
 <form target="_blank" action="#" id="searchFrm" name="" method="post">
<input type="text" value="搜索商品" id="shangpin" name="" class="my_frs" style="display:none">
<input type="text" value="搜索帖子" id="tiezi" name="" class="my_frs" style="display:none">
<input type="text" id="adduser" name="funame" value="搜索好友" class="my_frs">
<div class="search_select_top">
<span>用户</span>
<ul style="display: none;" class="search_frs_ul"><li>用户</li><li>商品</li><li>帖子</li></ul>
</div>
<input type="submit" value="" class="my_frs_search">
</form></span>
<script>
    $(function () {
        $('#searchFrm input[type=text]').focus(function () { this.value = ''; });
        $('#searchFrm div.search_select_top').mouseenter(function () { $('ul', this).slideDown(); }).mouseleave(function () { $('ul', this).slideUp() })
        .find('li').click(function () {
            $(this).closest('div').find('span').html(this.innerHTML).next().hide();
            $('#shangpin')[this.innerHTML == '商品' ? 'show' : 'hide']();
            $('#tiezi')[this.innerHTML == '帖子' ? 'show' : 'hide']();
            $('#adduser')[this.innerHTML == '用户' ? 'show' : 'hide']();
        });
    });
</script>