Есть вот такой вот выпадающий список. Подскажите пожалуйста,как сделать так что бы когда при нажатии он открывался и не растягивал тот блок, в котором он находится, а был как бы поверх этого блока и раскрывался отдельно?
var contacts = ["Jenny Hess", "Elliot Fu", "Stevie Feliciano", "Christian", "Matt"];
$(".wrapperDropdown").append('<ul>');
$(".wrapperDropdown ul").append('<span>');
for (var i = 0; i < contacts.length; i++) {
$(".wrapperDropdown ul").append('<li><a>' + contacts[i] + '</a></li>');
}
$(".wrapperDropdown span").addClass("dropdown").text("Select Friend").prependTo(".wrapperDropdown ul");
$(".wrapperDropdown ul").addClass("list");
$(".list").click(function() {
$(".wrapperDropdown li").toggle(300);
})
$(".wrapperDropdown li").click(function() {
$(".dropdown").html($(this).text())
});
.container {
display: block;
background: red;
}
.wrapperDropdown ul {
position: relative;
width: 200px;
padding: 10px;
margin: 0 auto;
border: 1px solid #3498db;
border-radius: 3px;
padding: 10px
}
.wrapperDropdown span {
font-size: small;
opacity: 0.3;
}
.wrapperDropdown ul li {
display: none;
text-align: left;
margin-top: 10px;
height: 100%;
}
.wrapperDropdown li {
list-style: none;
opacity: 0.8;
}
.wrapperDropdown ul li:hover {
background-color: #ecf0f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="fa_header">
<div class="container">
<ul class="nav">
<li>
<div class="wrapperDropdown"></div>
</li>
</ul>
</div>
</header>