溢出时下拉不工作：隐藏

Question

所以即时通讯网站上的导航栏出现问题。我希望能够在单击导航栏meny项目时显示额外导航栏菜单项的下拉列表。我遇到的问题是。溢出时导航栏没有显示：隐藏我的css类，当我删除它时，我制作的整个导航栏布局变得混乱。我不需要做什么就可以解决这个问题。

navbar代码：

.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

首先从overflow:hidden;移除.textLayout，因为这会从子菜单中删除。

然后从float移除li，使用内联块代替然后添加以下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;
}

下面的工作示例：

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