html - 悬停时显示隐藏的子菜单

Question

当悬停在“菜单 5”上时，我无法在我的 CSS 中使选择器正确显示隐藏的子菜单。

根据我下面的代码，我假设正确的选择器应该是:

ul li a:hover .dropdown-content{}

    ul {
      display: inline;
      list-style-type: none;
      margin: 0;
      overflow: hidden;
      background-color: white;
    }

    li {
      float: left;
    }

    li a {
      position: relative;
      width: 200px display: block;
      color: #333;
      text-align: center;
      text-decoration: none;
      font-weight: 800;
      padding: 50px;
    }

    .dropdown-content {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      -webkit-transition: opacity 600ms, visibility 600ms;
      transition: opacity 600ms, visibility 600ms;
    }

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

    /* Works when hovering over the whole menu*/
    /*
    ul:hover .dropdown-content {
      visibility: visible;
      opacity: 1;
    }
    */

    ul li a:hover .dropdown-content {
      visibility: visible;
      opacity: 1;
    }

<ul>
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 2</a></li>
  <li><a href="">Menu 3</a></li>
  <li><a href="">Menu 4</a></li>
  <li><a href="">Menu 5</a>
    <div class="dropdown-content">
      <a href="">Dropdown 1</a>
      <a href="">Dropdown 2</a>
    </div>
  </li>
</ul>

我已经注释掉了一段 css，它在将鼠标悬停在整个菜单上时有效，但我似乎无法向下钻取以识别单个菜单项。

是否建议向“菜单 5”添加一个类以区分菜单项？

非常感谢任何帮助!

Answer 1

使用可以在 li 悬停上显示你的下拉 div 并在 li 上使用 position: relative 如下代码:

ul {
      display: inline;
      list-style-type: none;
      margin: 0;
      overflow: hidden;
      background-color: white;
    }

    li {
      float: left;
       position: relative;
    }

    li a {
     
      width: 200px; 
      display: block;
      color: #333;
      text-align: center;
      text-decoration: none;
      font-weight: 800;
      padding: 50px;
    }

    .dropdown-content {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top:30px;
      left:0;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      -webkit-transition: opacity 600ms, visibility 600ms;
      transition: opacity 600ms, visibility 600ms;
      
    }

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

    ul li:hover .dropdown-content {
      visibility: visible;
      opacity: 1;
    }

<ul>
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 2</a></li>
  <li><a href="">Menu 3</a></li>
  <li><a href="">Menu 4</a></li>
  <li><a href="">Menu 5</a>
    <div class="dropdown-content">
      <a href="">Dropdown 1</a>
      <a href="">Dropdown 2</a>
    </div>
  </li>
</ul>