Dropdown not working when overflow:hidden

Question

So im having a problem with my navbar on the website im making. I want to be able to show a dropdown of extra navbar menu items when i click on a navbar meny item. The problem i having is. The navbar doesnt get shown when overflow:hidden om my css class and when i remove it my whole navbar layout i made gets messy. What do i need to do to not get this issue.

navbar code:

.headerclass {
  background-color: #ffffff;
  max-width: 1280px;
  min-width: 1200px;
}

.logotest {
  margin-top: -2%;
  width: 85px;
  height: 40px;
  margin-left: 4%;
  margin-bottom: 1.5%;
}

.testlayout {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ffffff;
  border-bottom: solid 1px;
  border-top: solid 1px;
}

li {
  float: left;
}

li a {
  display: block;
  color: rgb(110, 110, 120);
  text-align: center;
  padding: 13px 50px;
  text-decoration: none;
  border-right: solid 1px;
}

li a:hover {
  text-decoration: none;
  color: #0099cc;
}

.active {
  background: #0099cc;
  color: #ffffff;
}

.active a {
  color: #ffffff;
}

.active a:hover {
  color: #ffffff;
}

html,
body {
  height: 100%;
}

html {
  background-color: #d4d2db;
  display: table;
  margin: auto;
  min-width: 768px;
}

body {
  max-width: 1280px;
  min-width: 1200px;
  display: table-cell;
}

.sectionheader {
  vertical-align: middle;
  color: white;
  line-height: 30px;
  background-color: #0099cc;
  padding-left: 1%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="testlayout">
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 1-1</a></li>
        <li><a href="#">Page 1-2</a></li>
        <li><a href="#">Page 1-3</a></li>
      </ul>
    </div>
  </div>
</div>


<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>

Answer 1

First remove overflow:hidden; from .textLayout as this will crop off the sub-menu.

Then remove float from li as well, use inline block instead then add-on the following css:

.testlayout li {
    float: none;
    display: inline-block;
}

.testlayout li ul.dropdown-menu li{
    display: block;
}

.testlayout li ul.dropdown-menu li a{
    border: none;
}

Working sample below:

.headerclass {
  background-color: #ffffff;
  max-width: 1280px;
  min-width: 1200px;
}

.logotest {
  margin-top: -2%;
  width: 85px;
  height: 40px;
  margin-left: 4%;
  margin-bottom: 1.5%;
}

.testlayout {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/
  background-color: #ffffff;
  border-bottom: solid 1px;
  border-top: solid 1px;
}

li {
  float: left;
}

li a {
  display: block;
  color: rgb(110, 110, 120);
  text-align: center;
  padding: 13px 50px;
  text-decoration: none;
  border-right: solid 1px;
}

li a:hover {
  text-decoration: none;
  color: #0099cc;
}

.active {
  background: #0099cc;
  color: #ffffff;
}

.active a {
  color: #ffffff;
}

.active a:hover {
  color: #ffffff;
}

html,
body {
  height: 100%;
}

html {
  background-color: #d4d2db;
  display: table;
  margin: auto;
  min-width: 768px;
}

body {
  max-width: 1280px;
  min-width: 1200px;
  display: table-cell;
}

.sectionheader {
  vertical-align: middle;
  color: white;
  line-height: 30px;
  background-color: #0099cc;
  padding-left: 1%;
}

.testlayout li {
  float: none;
  display: inline-block;
}

.testlayout li ul.dropdown-menu li {
  display: block;
}

.testlayout li ul.dropdown-menu li a {
  border: none;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="testlayout">
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 1-1</a></li>
        <li><a href="#">Page 1-2</a></li>
        <li><a href="#">Page 1-3</a></li>
      </ul>
    </div>
  </div>
</div>


<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>