My attempt at creating a dropdown bootstrap menu resulted in having a border at the bottom of the dropdown using <hr>
https://i.sstatic.net/KzIZG.jpg
The issue arises when the dropdown menu crosses over the <hr> line.
Here is the HTML code snippet:
<div class="container">
<div class="row">
<div class="col-md-8">
<b>Available at :</b>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
List<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@foreach ($listings as $listing)
<li>Text</li><br>
@endforeach
</ul>
<hr>
</div>
Within the dropdown styling, there is top: 100%. If I remove it, the dropdown list displays correctly.
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
Does anyone know how to resolve this so that the dropdown will be displayed exactly at the bottom of "Available at : List"? Something similar to this image: