Bootstrap dropdown hides behind in smaller screens

Question

JSfiddle

The above fiddle works just fine in a regular screen size. However if I try it in a smaller screen size (try resizing the browser), the dropdown hides behind the menu and instead gives a scroll bar. How do I prevent this? How to have the drodown outside the menu bar and have it completely visible in a smaller screen too?

Already tried : link1, link2

HTML

<nav class="navbar navbar-default">
<div id="menu" class="container-fluid">
    <div class="navbar-header">
        <button class="navbar-toggle" aria-expanded="true" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
            <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="">TRILLSOFT</a>
    </div>
    <div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" aria-expanded="true" style="">
        <ul class="nav nav-pills">
            <li class="active">
                <a href="#TAPL" data-toggle="tab" aria-expanded="true">TAPL</a>
            </li>
            <li class="">
                <a href="#productorderedit" data-toggle="tab" aria-expanded="false">productorderedit</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="TAPL" class="tab-pane fade active in">
                <li class="dropdown open">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
                        Project Orders
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">Project Order Lookup</a>
                        </li>
                        <li>
                            <a href="#">Project Order Lookup of my Active projects</a>
                        </li>
                    </ul>
                </li>
            </div>
            <div id="productorderedit" class="tab-pane fade">
                <li>
                    <a href="#">Release</a>
                </li>
                <li>
                    <a href="#">FSC Labels</a>
                </li>
                <li>
                    <a href="#">Unrelease Selected Items</a>
                </li>
            </div>
        </div>
    </div>
    <ul class="nav nav-pills navbar-right">
        <li>
            <div>
                Logged in as dshah |
                <a href="/app_dev.php/logout"> Logout</a>
            </div>
        </li>
    </ul>
</div>

Answer 1

overflow-y is set as auto by default which provides a scrolling bar when you have excessive content.

.navbar-collapse.in {
  overflow-y: visible !important; /* Avoid !important, used it here only for priority */
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div id="menu" class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" aria-expanded="true" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
        <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="">TRILLSOFT</a>
    </div>
    <div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" aria-expanded="true" style="">
      <ul class="nav nav-pills">
        <li class="active">
          <a href="#TAPL" data-toggle="tab" aria-expanded="true">TAPL</a>
        </li>
        <li class="">
          <a href="#productorderedit" data-toggle="tab" aria-expanded="false">productorderedit</a>
        </li>
      </ul>
      <div class="tab-content">
        <div id="TAPL" class="tab-pane fade active in">
          <li class="dropdown open">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
Project Orders
<span class="caret"></span>
</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Project Order Lookup</a>
              </li>
              <li>
                <a href="#">Project Order Lookup of my Active projects</a>
              </li>
            </ul>
          </li>
        </div>
        <div id="productorderedit" class="tab-pane fade">
          <li>
            <a href="#">Release</a>
          </li>
          <li>
            <a href="#">FSC Labels</a>
          </li>
          <li>
            <a href="#">Unrelease Selected Items</a>
          </li>
        </div>
      </div>
    </div>
    <ul class="nav nav-pills navbar-right">
      <li>
        <div>
          Logged in as dshah |
          <a href="/app_dev.php/logout"> Logout</a>
        </div>
      </li>
    </ul>
  </div>
</nav>