仅在悬停父li时显示下拉菜单

Question

我正在尝试构建一个下拉菜单。我的问题是，悬停内容也会显示下拉菜单。我目前正在使用此代码：

/* actual dropdown menu */

#menu-hauptmenue {
  height: 45px;
}

.sub-menu {
  opacity: 0;
  background: #4d4d4d;
  display: block;
  z-index: 200;
  width: 250px;
  position: absolute;
  margin-top: 23px;
}

.sub-menu li {
  display: block;
  width: 250px;
  line-height: 2.7;
  padding: 10px 15px 10px 15px;
  z-index: 220;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}

.sub-menu li a {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  text-decoration: none;
}

.sub-menu li:hover {
  background-color: #333333;
  cursor: pointer;
}

.sub-menu a:hover {
  border-bottom: none;
}

#menu-hauptmenue li:hover .sub-menu {
  opacity: 1;
}

#billboard img {
  z-index: 1;
}

li {
  z-index: 20;
}

.clearfix:after {
  display: block;
  clear: both;
}

nav>ul>li {
  position: relative;
}

nav.open .sub-menu {
  padding-top: 0px;
  display: none;
}


/* styling of the nav */

nav ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: #4D4D4D;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  text-decoration: none;
}

nav ul li a:hover {
  border-bottom: 1px solid #4D4D4D;
}

<nav>
  <ul id="menu-hauptmenue">
    <li><a href="#">Parent 1</a>
      <ul class="sub-menu">
        <li><a href="#">Dropdown 1</a></li>
        <li><a href="#">Dropdown 2</a></li>
        <li><a href="#">Dropdown 3</a></li>
      </ul>
    </li>

    <li><a href="#">Parent 2</a></li>
    <li><a href="#">Parent 3</a></li>
  </ul>

</nav>

如您所见，将鼠标悬停在导航下方的内容中也会显示下拉菜单。最好只在悬停父li元素时显示导航，在本例中为“Parent 1”。我怎样才能以最好的方式实现这一目标？谢谢你的建议。

Answer 1

这是因为您的元素存在 0不透明度，因此您可以与它进行交互。您可以尝试使用display：none / block，如下所示：

/* actual dropdown menu */

#menu-hauptmenue {
  height: 45px;
}

.sub-menu {
  opacity: 0;
  background: #4d4d4d;
  display: none;
  width: 250px;
  position: absolute;
  margin-top: 23px;
}

.sub-menu li {
  display: block;
  width: 250px;
  line-height: 2.7;
  padding: 10px 15px 10px 15px;
  z-index: 220;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}

.sub-menu li a {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  text-decoration: none;
}

.sub-menu li:hover {
  background-color: #333333;
  cursor: pointer;
}

.sub-menu a:hover {
  border-bottom: none;
}

#menu-hauptmenue li:hover .sub-menu {
  opacity: 1;
  display:block;
}

#billboard img {
  z-index: 1;
}

li {
  z-index: 20;
}

.clearfix:after {
  display: block;
  clear: both;
}

nav>ul>li {
  position: relative;
}

nav.open .sub-menu {
  padding-top: 0px;
  display: none;
}


/* styling of the nav */

nav ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: #4D4D4D;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  text-decoration: none;
}

nav ul li a:hover {
  border-bottom: 1px solid #4D4D4D;
}

<nav>
  <ul id="menu-hauptmenue">
    <li><a href="#">Parent 1</a>
      <ul class="sub-menu">
        <li><a href="#">Dropdown 1</a></li>
        <li><a href="#">Dropdown 2</a></li>
        <li><a href="#">Dropdown 3</a></li>
      </ul>
    </li>

    <li><a href="#">Parent 2</a></li>
    <li><a href="#">Parent 3</a></li>
  </ul>

</nav>