导航栏中带有 CSS 的简单下拉菜单

Question

我正在尝试在具有多个链接的导航栏中创建一个简单的下拉菜单（只有 CSS），问题是下拉菜单将显示每个链接，而不仅仅是所需的链接。代码如下：

HTML 和 CSS

ul {
  list-style: none;
}

.topNav {
  background-color: #ff66b3;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: relative;
}

.topNav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 8px;
  text-decoration: none;
  font-size: 14px;
}

.topNav a:hover {
  background-color: #ffb3d9;
  color: black;
}

.dropDown {
  display: none;
  position: absolute;
  z-index: 1;
  min-width: 160px;
}

.dropDown a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.topNav .mainLink:hover .dropDown {
  display: block;
}

<div class="topNav" id="myTopnav">
  <a class="mainLink" id="menuIcon" href="#home">&#9776</a>
  <a class="mainLink" href="#home">NerdBook</a>
  <div class="dropDown">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

下拉菜单必须仅显示在“menuIcon”链接上。

Answer 1

您已经在<a> 标记上拥有一个ID，您想触发:hover，因此将其用作参考选择器。此外，您的代码也不起作用，因为 .dropDown 不是您的链接的孩子，将其更改为与兄弟姐妹匹配：

#menuIcon:hover ~ .dropDown

ul {
  list-style: none;
}
.topNav {
  background-color: #ff66b3;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: relative;
}
.topNav:after {
  content:"";
  display:table;
  clear:both;
}
.topNav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 8px;
  text-decoration: none;
  font-size: 14px;
}
.topNav a:hover {
  background-color: #ffb3d9;
  color: black;
}
.dropDown {
  background:#e1e1e1;
  display: none;
  position: absolute;
  top:100%;
  z-index: 1;
  min-width: 160px;
}

.dropDown a {
  float:none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#menuIcon:hover ~ .dropDown, .dropDown:hover {
  display: block;
}

<div class="topNav" id="myTopnav">
  <a class="mainLink" id="menuIcon" href="#home">&#9776</a>
  <a class="mainLink" href="#home">NerdBook</a>
  <div class="dropDown">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>