dropdown
<div class="select">
<a href="javascript:void(0);" class="slct">Выбрать</a>
<ul class="drop">
<li>Select 1</li>
<li>Select 2</li>
<li>Select 3</li>
<li>Select 4</li>
</ul>
<input type="hidden" id="select">
</div>
/* = Select */
.slct {
display: block;
border-radius: 5px;
border: 1px solid #cecece;
background-color: #F6F6f6;
width: 285px;
padding: 4px 15px 4px 10px;
color: #444;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.slct.active {
border-radius: 5px 5px 0 0;
}
.drop {
margin: 0;
padding: 0;
width: 285px;
border: 1px solid #cecece;
border-top: none;
display: none;
position: absolute;
background: #fff;
}
.drop li {
list-style: none;
border-top: 1px dotted #e8e8e8;
cursor: pointer;
display: block;
color: #444;
padding: 4px 15px 4px 25px;
}
.drop li:hover {
background-color: #e8e8e8;
color: #222;
}
// Select
$('.slct').click(function(){
var dropBlock = $(this).parent().find('.drop');
if( dropBlock.is(':hidden') ) {
dropBlock.slideDown(150);
$(this).addClass('active');
$('.drop').find('li').click(function(){
var selectResult = $(this).html();
$(this).parent().parent().find('input').val(selectResult);
$(this).parent().parent().find('.slct').removeClass('active').html(selectResult);
dropBlock.slideUp(150);
});
} else {
$(this).removeClass('active');
dropBlock.slideUp(150);
}
return false;
});
$(document).mouseup(function (e) {
var container = $(".drop");
if (container.has(e.target).length === 0){
container.slideUp(150);
$('.slct').removeClass('active');
}
});