Bringen Sie die Taste an die Vorderseite der Dropdown-Liste

Question

Ich muss Schaltfläche in die Dropdown-Liste in der Dropdown-Taste an die Vorderseite der Dropdown-Liste bringen. Auch wenn ich den Z-Index gesetzt haben:

<div id="dd" class="wrapper-dropdown-5" tabindex="1">BOOK NOW 
    <ul class="dropdown"> 
    <li><a href="#">Booking.com</a></li> 
    <li><a href="#">Airbnb</a></li> 
    <li><a href="#">Trip Advisor</a></li> 
</ul> 
</div> 

https://jsfiddle.net/2pdgc537/6/

----- bearbeiten ---------------------- ---

ich brauche nicht den Tropfen zu bringen unten brauche ich einige Sache wie diese https://s27.postimg.org/pqna239sj/sampel.png

Answer 1

Sie müssen die Top-Position .wrapper-dropdown-5 .dropdown dh ändern

.wrapper-dropdown-5 .dropdown 
{ 
    top : 66%; 
} 

Hier ist die

Snippet Arbeits

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><a href="#">Booking.com</a></li> 
 
       <li><a href="#">Airbnb</a></li> 
 
       <li><a href="#">Trip Advisor</a></li> 
 
      </ul> 
 
      </div> 
 

 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

Fügen Sie diese Zeile in css .dropdown{margin-top:15%;}. Fiddle Link ist: https://jsfiddle.net/6zw6j97b/

Answer 3

Bearbeiten Sie einfach Ihre CSS wie 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; 
}``