Выпадающий bootstrap отделился

Я пытался сделать выпадающее меню bootstrap и есть граница в нижней части выпадающего меню с помощью <hr>

проблема в выпадающем меню перейти
<hr>
линия.

вот html

<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>

под выпадающим стилем, естьtop : 100%, если я распишу его, выпадающий список отобразится правильно.

.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);

Кто-нибудь знает, как это исправить, так что выпадающий список будет отображаться точно в нижней части доступно по адресу :List ?
больше похоже на это