我的 CSS 阻止下拉导航栏的引导代码工作

Question

我编写了一个 HTML 代码并合并了我自己的 CSS 代码以及 Bootstrap 4 代码。当我使用 CSS 文件时——我在引导声明后的标题中声明了它——引导导航栏的下拉功能不起作用。具体来说，单击该下拉菜单项无效。当我注释掉 CSS 引用或者只是在它的主目录之外运行 HTML 文件时（css 文件所在的位置），下拉菜单可以正常工作，但我当然会丢失我写入我的 css 文件的所有格式。

我的问题是：在我的 CSS 中，是什么阻止了导航栏中的引导下拉菜单工作？

    body {
    font-size:16pt;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; /* picks first 
    font in list order*/
    color:brown;
    background-color: #ffffcc;
    line-height:18pt;
    padding-left:24pt;
    padding-right:24pt;
    padding-top:5pt;
    text-align:center;
    border: double 2px green;


  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li a{
  float: none;
}

li a {
  display: block;
  padding: 14 16;
  background-color: #000000;
}

a {
    text-decoration:none;
}

a:link, a:visited {
    color:#8094d6;
}

a:hover, a:active {
    color:#FF9933;
}

.active {
  background-color: #4CAF50;
}

.center {
  display: block;
  margin-left: auto ;
  margin-right: auto;
  width: 20%;
}




a {
  border-right: 1px solid #bbb;
}

a:last-child {
  border-right: none;
}


* {box-sizing: border-box;}

h1{
    font:18pt Verdana, Geneva, arial, Helvetica, sans-serif;
    font-weight:bold;
    line-height: 20pt;
}

h2{
    font:16pt Verdana, Geneva, arial, Helvetica, sans-serif;
    font-weight:bold;
    line-height: 10pt;
}



subheader {
    font-weight:bold;
    color:brown;
}

img{
    padding:3pt;

}

footer {
    font-size: 9pt;
    font-style:italic;
    line-height:12pt;
    text-align:center;
    padding-top:30pt;
}

Answer 1

我使用basic drop-down menu code from w3schools 并在 bootstrap.css 之后添加了您的 CSS 以重新创建您的案例；

在您的案例中，限制下拉菜单在屏幕上显示的罪魁祸首是 overflow: hidden;，您将其应用于 ul 元素；在下面的代码中，我已将其注释掉，下拉菜单就像一个魅力；

在下面工作sn-p：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>
<br>

<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu in the navbar.</p>
</div>



<style>
  body {
    font-size: 16pt;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    /* picks first 
    font in list order*/
    color: brown;
    background-color: #ffffcc;
    line-height: 18pt;
    padding-left: 24pt;
    padding-right: 24pt;
    padding-top: 5pt;
    text-align: center;
    border: double 2px green;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
    background-color: #333;
  }
  
  li a {
    float: none;
  }
  
  li a {
    display: block;
    padding: 14 16;
    background-color: #000000;
  }
  
  a {
    text-decoration: none;
  }
  
  a:link,
  a:visited {
    color: #8094d6;
  }
  
  a:hover,
  a:active {
    color: #FF9933;
  }
  
  .active {
    background-color: #4CAF50;
  }
  
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
  }
  
  a {
    border-right: 1px solid #bbb;
  }
  
  a:last-child {
    border-right: none;
  }
  
  * {
    box-sizing: border-box;
  }
  
  h1 {
    font: 18pt Verdana, Geneva, arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 20pt;
  }
  
  h2 {
    font: 16pt Verdana, Geneva, arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 10pt;
  }
  
  subheader {
    font-weight: bold;
    color: brown;
  }
  
  img {
    padding: 3pt;
  }
  
  footer {
    font-size: 9pt;
    font-style: italic;
    line-height: 12pt;
    text-align: center;
    padding-top: 30pt;
  }
</style>