下拉引導走散了

我試圖讓下拉菜單的引導，有使用<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);

任何人都知道如何解決這個問題，這樣下拉將顯示在可用at：List的底部嗎？更多類似這樣的