Как изменить положение выпадающего меню?

Question

Мне было интересно, как бы я переместил раскрывающееся меню.

То, что я пытаюсь достичь, - это поддельный поиск. Поэтому, когда вы нажимаете кнопку поиска, она активирует выпадающий список с поддельными фиктивными результатами. Я пытаюсь изменить положение раскрывающегося списка, чтобы оно выглядело так, как будто оно произошло из поиска.

Вот мой код https://jsfiddle.net/judison/45f50ws9/

.searchBar { 
    background-color: #67B4AD; 
    color: white; 
    width: 280px; 
    border: none; 
} 
.dropdown-menu { 
    right: 100px; 
} 
.add-on .dropdown > .btn { 
    border: none; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    color: white; 
    background-color: #67B4AD; 
} 
/* stop the glowing blue shadow */ 

.add-on .form-control:focus { 
    color: white; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    background-color: #67B4AD; 
} 

<form class="navbar-form navbar-left" role="search"> 
    <div class="searchBarPadding form-group"> 
    <div class="input-group add-on"> 
     <input style="height:22px;" type="text" class="searchBar" placeholder=" &nbsp; Search"> 
     <div class="input-group-btn"> 
     <div class="dropdown"> 
      <button style="height:22px;" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-search" style="height:10px;"></i> 
      </button> 
      <ul class="dropdown-menu"> 
      <li><a href="#">HTML</a> 
      </li> 
      <li class="disabled"><a href="#">CSS</a> 
      </li> 
      <li><a href="#">JavaScript</a> 
      </li> 
      <li class="divider"></li> 
      <li><a href="#">About Us</a> 
      </li> 
      </ul> 
     </div> 
     </div> 

    </div> 
</form> 

Я был бы очень признателен за совет!

Answer 1

Heres очень простой пример, который вы можете построить от

Codepenhttp://codepen.io/noobskie/pen/xwEXpv

Просто добавил событие щелчка к .dropdown-toggle который будет затухать в выпадающем списке и удалить относительный постион на

.input-group-btn, 
.dropdown{ 
    position:initial; 
} 

Answer 2

Это может быть то, что вы пытаетесь выполнить. Вы можете прикрепить кнопку с добавлением и отрегулировать ширину dropdown-menu до класса form-control, чтобы они были одинаковой общей шириной.

#searchForm .form-control { 
 
    background-color: #67B4AD; 
 
    color: white; 
 
    width: 280px; 
 
    border: none; 
 
} 
 
#searchForm .dropdown-menu { 
 
    width: 320px; 
 
} 
 
#searchForm .btn.btn-default { 
 
    border: 1px solid #67B4AD; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
 
    color: white; 
 
    background-color: #67B4AD; 
 
} 
 
/* stop the glowing blue shadow */ 
 

 
#searchForm .form-control:focus { 
 
    color: white; 
 
    box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
    background-color: #67B4AD; 
 
} 
 
@media (max-width: 767px) { 
 
    #searchForm .form-control { 
 
    width: 100%; 
 
    } 
 
    #searchForm .dropdown-menu { 
 
    width: auto; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> <a class="navbar-brand" href="#">Brand</a> 
 

 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 

 
     </li> 
 
     <li><a href="#">Link</a> 
 

 
     </li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left" role="search" id="searchForm"> 
 
     <div class="input-group"> 
 
      <input type="text" class="form-control" aria-label="..."> 
 
      <div class="input-group-btn"> 
 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
      <ul class="dropdown-menu dropdown-menu-right"> 
 
       <li><a href="#">HTML</a> 
 

 
       </li> 
 
       <li class="disabled"><a href="#">CSS</a> 
 

 
       </li> 
 
       <li><a href="#">JavaScript</a> 
 

 
       </li> 
 
       <li class="divider"></li> 
 
       <li><a href="#">About Us</a> 
 

 
       </li> 
 
      </ul> 
 
      </div> 
 
      <!-- /btn-group --> 
 
     </div> 
 
     <!-- /input-group --> 
 
     </form> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>