Dropdown menu inside tabbable bootstrap

Question

I am trying to integrate bootstrap tabs and dropdown menus using 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>

But its not showing the dropdown menu properly

The menu goes somewhere and puts a scroll inside it.

JSFIDDLE Demo

Answer 1

You can fix your problem with just adding a simple line of

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

see demo below

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