Question

我有一个正在构建的站点，该站点具有一些下拉菜单。我敢肯定这不是最有效的方法，但是我很好奇为什么会这样。对于这些下拉菜单，我有完全相同的CSS代码，但是其中一个嵌套在主导航下，而另一个嵌套在移动菜单下（因此所有内容都位于按钮下）。

代码之所以有效，是因为当我将显示内容更改为其他任何内容时，样式都可以正常工作。但是由于某些原因，我只是无法弄清为什么移动菜单下拉菜单不起作用但是主要的导航栏是。

以下是主导航栏下拉菜单的代码：

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

以及移动菜单下拉菜单的代码：

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

Answer 1

选择移动显示类别：

#menuicon .icon-dropdown .icon-dropbtn{
    //CSS for mobile display
}

或

为两个按钮添加相同的类：
喜欢

主要：

<div id="menu" class="chivolight">
  <ul>
    <li>
      <div class="dropdown">
        <button class="dropbtn someclass"><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>

手机：

<div id="menuicon">
    <div class="icon-dropdown">
      <button class="icon-dropbtn someclass" 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>

现在将CSS用于给定的类：

.someclass{
    //Now both buttons have same class
    //Add CSS
}

Answer 2

您在移动CSS中有一个错误命名的悬停选择器：

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

应为：

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

相同的CSS代码可用于一个按钮，但不适用于另一个按钮

2 个答案: