效果图:
CSS代码:
.searchbar{
margin: 10px 0;
width: 600px;
float: right;
height: 95px;
}
.search{
width:500px;
border: #cf0000 solid 2px;
height: 34px;
margin: 28px 0;
position: relative;
}
.search div{
float: left;
}
.searchSelect{
height: 34px;
font-size: 12px;
line-height: 34px;
width: 100px;
text-align: center;
border-right: #cf0000 solid 1px;
color: #666;
cursor: pointer;
}
.searchInput input{
height: 34px;
border: 0;
width: 330px;
padding: 0 10px;
}
.searchSubmit input{
border: 0;
height: 34px;
width: 69px;
background-color: #cf0000;
color: #fff;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.selectItems{
position: absolute;
top: 34px;
left: -1px;
z-index: 999;
background-color: #f0f0f0;
width: 100px;
text-align: center;
border: #ccc solid 1px;
}
.selectItems ul{
list-style: none;
font-size: 12px;
}
.selectItems ul li{
height: 30px;
line-height: 30px;
color: #666;
cursor: pointer;
}
.selectItems ul li:hover{
color: #f60;
}
html代码部分:
<div class="searchbar">
<div class="search">
<div title="请选择" class="searchSelect">
萌宠资讯
</div>
<div class="searchInput">
<input type="text" name="keyword" value="" />
</div>
<div class="searchSubmit">
<input type="submit" name="submit" value="搜 索" />
</div>
<div class="selectItems">
<ul>
<li>萌宠资讯</li>
<li>萌宠百科</li>
<li>萌宠知道</li>
<li>萌宠社区</li>
</ul>
</div>
</div>
</div>
jquery代码部分:
<script type="text/javascript">
$(document).ready(function(){
$(".selectItems").hide();
$(".searchSelect").click(function(event){
if($(".selectItems").hasClass('clickshow')){
$(".selectItems").removeClass('clickshow');
$(".selectItems").hide();
}else{
$(".selectItems").addClass('clickshow');
$(".selectItems").show();
}
event.stopPropagation();
});
$(".selectItems>ul>li").click(function(){
$(".searchSelect").empty();
$(".searchSelect").text($(this).html());
$(".selectItems").removeClass('clickshow');
$(".selectItems").hide();
});
$(window).click(function(){
if($(".selectItems").hasClass('clickshow')){
$(".selectItems").removeClass('clickshow');
$(".selectItems").hide();
}
});
});
</script>
仅供参考!