the_little,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.drop{
display: none;
}
li.active{
background-color: #D3D3D3;
}
body{
display: flex;
}
.select{
margin: 0 auto;
}
.slct.active{
background-color: #EEE8AA;
border-radius: 8px;
padding: 4px 6px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".select").each(function(i, parent) {
var a = $(".slct", parent);
var drop = $(".drop", parent);
var input = $("input", parent);
$(parent).on("click", ".slct, li", function(event) {
event.preventDefault();
drop.slideToggle(800, function() {
$(this).is(":hidden") && a.removeClass("active")
});
$(this).addClass("active");
if ($(this).is("li")) {
event.stopPropagation();
$(this).siblings().removeClass("active");
var title = this.textContent.trim();
a.text(title);
input.val(title)
}
})
}).find("li:first").addClass("active");
$(document).click(function(event) {
$(event.target).closest(".select").length ||
$(".slct.active").click()
})
});
</script>
</head>
<body>
<div class="select">
<a href="#" class="slct">Прямоугольные стеллы</a>
<ul class="drop drop_stella">
<li><a>Прямоугольные стеллы</a></li>
<li><a>Резные стеллы</a></li>
<li><a>Двойник</a></li>
</ul>
<input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
</div>
<div class="select">
<a href="#" class="slct">Прямоугольные стеллы</a>
<ul class="drop drop_stella">
<li><a>Прямоугольные стеллы</a></li>
<li><a>Резные стеллы</a></li>
<li><a>Двойник</a></li>
</ul>
<input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
</div>
</body>
</html>