Bring button to front of Dropdown list - html

Question

I need to Bring button to the front of Dropdown list in my dropdown button. Even though I have set the z-index:
<div id="dd" class="wrapper-dropdown-5" tabindex="1">BOOK NOW
<ul class="dropdown">
<li>Booking.com</li>
<li>Airbnb</li>
<li>Trip Advisor</li>
</ul>
</div>
https://jsfiddle.net/2pdgc537/6/
-----Edit-------------------------
I don’t need bring down the drop down I need some thing like this https://s27.postimg.org/pqna239sj/sampel.png

Answer 1

You need to change the top position of .wrapper-dropdown-5 .dropdown i.e.,
.wrapper-dropdown-5 .dropdown
{
top : 66%;
}
Here is the working snippet
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function() {
var obj = this;
obj.dd.on('click', function(event) {
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd = new DropDown($('#dd'));
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-5').removeClass('active');
});
});
/* DEMO 5 */
.wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 12px 15px;
z-index: 10;
/* Styles */
background: #63731b;
border-radius: 50px;
border: 5px solid transparent;
border-color: #ffffff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
color: white;
font-weight: 600;
cursor: pointer;
outline: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-5:after {
/* Little arrow */
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0px 6px;
border-style: solid;
border-color: #000000 transparent;
}
.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 66%;
left: 0;
right: 0;
z-index: 5;
/* Styles */
background: #63731b;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: none;
border-bottom: none;
list-style: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: hidden;
}
.wrapper-dropdown-5 .dropdown li {
padding: 0 10px;
}
.wrapper-dropdown-5 .dropdown li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 10px 0;
transition: all 0.3s ease-out;
/*border-bottom: 1px solid #e6e8ea;*/
}
.wrapper-dropdown-5 .dropdown li:last-of-type a {
border: none;
}
.wrapper-dropdown-5 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Hover state */
.wrapper-dropdown-5 .dropdown li:hover a {
color: #57a9d9;
}
/* Active state */
.wrapper-dropdown-5.active {
border-radius: 40px;
background: #E7B300;
box-shadow: none;
/*border-bottom: none;*/
color: white;
z-index: 10;
}
.wrapper-dropdown-5.active:after {
border-color: #82d1ff transparent;
}
.wrapper-dropdown-5.active .dropdown {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
max-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 h-center">
<br/>
<div id="dd" class="wrapper-dropdown-5" tabindex="1">BOOK NOW
<ul class="dropdown">
<li>Booking.com</li>
<li>Airbnb</li>
<li>Trip Advisor</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

Add this line in css .dropdown{margin-top:15%;}. Fiddle link is : https://jsfiddle.net/6zw6j97b/

Answer 3

Just edit your css like bolow.
.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 80%;
display: block;
left: 0;
right: 0;
z-index: 5;
/* Styles */
background: #63731b;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: none;
border-bottom: none;
list-style: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: hidden;
}``