меню Выпадающего внутри tabbable бутстрапа

Question

Я пытаюсь интегрировать вкладки начальной загрузки и выпадающее меню с помощью Bootstrap 2.3.4

<div class="container"> 
    <div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container-fluid"> 
     <div class="nav-no-collapse header-nav"> 
      <ul class="nav pull-left nav-tabs"> 
      <li class="dropdown"> 
       <a href="/Home"> 
       <i class="icon-bar-chart"></i></a> 
      </li> 
      <li class="dropdown"><a href="javascript:RefreshAll();" title="Refresh All"><i class="icon-refresh"></i></a> 
      </li> 
      <li><a href="#dev" data-toggle="tab">Development</a> </li> 
      <li><a href="#testing" data-toggle="tab">Testing</a> </li> 
      </ul> 
     </div> 
     </div> 
     <div class="container-fluid"> 
     <div class="tab-content"> 
      <div class="tab-pane fade" id="dev"> 
      <ul class="nav pull-left"> 
       <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dev</a> 
       <ul class="dropdown-menu"> 
        <li> 
        <a href="">Dev1</a> 
        <a href="">Dev2</a> 
        <a href="">Dev3</a> 
        </li> 
       </ul> 
       </li> 
      </ul> 
      </div> 
      <div class="tab-pane fade" id="testing"> 
      <ul class="nav pull-left"> 
       <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Staging</a> 
       <ul class="dropdown-menu"> 
        <li> 
        <a href="">Staging 1</a> 
        <a href="">Staging 2</a> 

        </li> 
       </ul> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Но его не показывать ниспадающее меню правильно

меню идет где-то и помещает в нее свиток.

JSFIDDLE Demo

Answer 1

Вы можете исправить вашу проблему с просто добавив простую линию

.tab-content{ 
    overflow:inherit !important; 
} 

см демонстрационная ниже

.tab-content{ 
 
    overflow:inherit !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
     <div class="navbar navbar-fixed-top"> 
 
      <div class="navbar-inner"> 
 
       <div class="container-fluid"> 
 
        <div class="nav-no-collapse header-nav"> 
 
         <ul class="nav pull-left nav-tabs"> 
 
          <li class="dropdown"><a href="/Home"> 
 
           <i class="icon-bar-chart"></i></a></li> 
 
          <li class="dropdown"><a href="javascript:RefreshAll();" 
 
           title="Refresh All"><i class="icon-refresh"></i></a> 
 
          </li> 
 
          <li><a href="#dev" data-toggle="tab">Development</a> </li> 
 
          <li><a href="#testing" data-toggle="tab">Testing</a> </li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
       <div class="container-fluid"> 
 
        <div class="tab-content"> 
 
         <div class="tab-pane fade" id="dev"> 
 
          <ul class="nav pull-left"> 
 
           <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" 
 
            href="#">Dev</a> 
 
            <ul class="dropdown-menu"> 
 
             <li> 
 
             <a href="">Dev1</a> 
 
             <a href="">Dev2</a> 
 
             <a href="">Dev3</a> 
 
             </li> 
 
            </ul> 
 
           </li> 
 
          </ul> 
 
         </div> 
 
         <div class="tab-pane fade" id="testing"> 
 
          <ul class="nav pull-left"> 
 
           <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" 
 
            href="#">Staging</a> 
 
            <ul class="dropdown-menu"> 
 
             <li> 
 
             <a href="">Staging 1</a> 
 
             <a href="">Staging 2</a> 
 
             
 
             </li> 
 
            </ul> 
 
           </li> 
 
          </ul> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>