我有一个网站，我正在建设，其中有几个下拉菜单。 我确信这不是以最有效的方式进行的，但我很好奇为什么会发生这种情况。 我有完全相同的CSS代码为这些下拉，但其中一个是嵌套在主导航下，另一个是在移动菜单下（所以像所有将是一个按钮下）。

代码有点工作，因为当我将显示更改为“任何”而不是“无”时，样式可以正常工作。 但是出于某种原因，我不知道为什么移动菜单下拉不工作，而主导航栏下拉不工作。

以下是主导航栏下拉列表的代码:

null

#menu .dropdown {
  top: -1px;
  position: relative;
  display: inline-block;
  z-index: 9999;
  margin-left: -6px;
  margin-right: -7px;
}

#menu .dropbtn {
  background-color: transparent;
  color: white;
  border: none;
  font-family: 'chivolight';
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 1px;
}

#menu .dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 10em;
  box-shadow: relative rgba(0, 0, 0, 0.2);
  margin-top: -0.2em;
  margin-left: 0.35em;
  top: 2.8em;
  z-index: 99;
}

#menu .dropdown-content a {
  background: white;
  padding: 0.4em 1em;
  text-decoration: none;
  display: block;
}

#menu .dropdown-content a:hover {
  background-color: #ddd;
}

#menu .dropdown:hover .dropdown-content {
  display: block;
}

#menu .dropdown:hover .dropbtn {
  background-color: transparent;
}

```

<div id="menu" class="chivolight">
  <ul>
    <li>
      <div class="dropdown">
        <button class="dropbtn"><a href="pageholder.html" accesskey="2" title="" class="hvr-underline-reveal">About Us</a></button>
        <div class="dropdown-content">
          <a href="pageholder.html" class="hvr-underline-reveal">Capabilties</a>
          <a href="certifications.html" class="hvr-underline-reveal">Certifications</a>
          <a href="pageholder.html" class="hvr-underline-reveal">History</a>
          <a href="pageholder.html" class="hvr-underline-reveal">Quality</a>
        </div>
      </div>
    </li>
  </ul>
</div>

null

和mobile菜单下拉列表的代码:

null

#menuicon .icon-dropbtn {
  background-color: white;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

#menuicon .icon-dropdown {
  position: relative;
  display: inline-block;
}

#menuicon .icon-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  right: 0;
}

#menuicon .icon-dropbtn:hover {
  opacity: 0.8;
  transition: 0.3s;
}

#menuicon .icon-dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#menuicon .icon-dropdown-content a:hover {
  background-color: #f1f1f1
}

#menuicon .icon-dropbtn:hover .icon-dropdown-content {
  display: block;
}

#menuicon .icon-dropdown:hover .icon-dropbtn {
  background-color: #3e8e41;
}

<div id="menuicon">
  <div class="icon-dropdown">
    <button class="icon-dropbtn" style="font-size: 0.8em;"><font color=black><i class="fa fa-bars"></i></font></button>
    <div class="icon-dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 1</a>
      <a href="#">Link 1</a>
    </div>
  </div>
</div>

null