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>

Answer 2

首先，将鼠标悬停在li而不是a上以显示下拉菜单，减少填充并向display:block添加a并更改一些css

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

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: 5px;
      display:block;
    }

    .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: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>

悬停时显示隐藏的子菜单

2 个答案: