<style type="text/css">
.SearchWrap { display:inline-block; vertical-align:top; width:96px; }
.SearchJQuery { border:1px solid #d4d4d4; height:30px; position:relative; cursor:pointer; }
.SearchJQuery span { position:absolute; top:10px; right:14px; color:#e60012; }
.SearchJQuery div { position:absolute; top:10px; left:7px; color:#2a2a2a; font-weight:bold; }
.SearchJQuery ul { position:absolute; border:1px solid #d4d4d4; border-bottom:0; width:100%; top:30px; left:-1px; background-color:#FFF; margin:0; padding:0; display:none; }
.SearchJQuery ul li { list-style-type:none; height:24px; line-height:26px; padding:0 0 0 7px; cursor:pointer; color:#999; border-bottom:1px solid #d4d4d4; }
.SearchJQuery ul li:hover { background-color:#ddd; color:#000; }
</style>

<span class="SearchWrap">
<div class="SearchJQuery">
 <span>▼</span>
 <div></div>
 <input type="hidden" value=""/>
 <ul>
  <li title="">전체</li>
  <li title="sell">상품명</li>
  <li title="home">상점명</li>
 </ul>
</div>
</span>


<script type="text/javascript">
$(".SearchJQuery").click(function(){
 $(this).children('ul').toggle(100);
});

$(".SearchJQuery").each(function(){
 if($(this).children('input').val()){
  $(this).children('div').text($(this).children('ul').children("li[title='"+$(this).children('input').val()+"']").text());
 }else{
  var NotTitle = $(this).children('ul').children("li[title='"+$(this).children('input').val()+"']").text();
  if(NotTitle){
   $(this).children('div').text(NotTitle);
  }else{
   $(this).children('div').text($(this).children('ul').children('li:first').html());
   $(this).children('input').val($(this).children('ul').children('li:first').attr('title'));
  }
 }
});

$(".SearchJQuery > ul > li").click(function(){
 $(this).parents('div').children('div').text($(this).text());
 $(this).parents('div').children('input').val($(this).attr('title'));
});
</script>