列表项“li:hover”不起作用答案

【问题标题】：List item `li:hover` is not working列表项“li:hover”不起作用
【发布时间】：2018-09-14 17:21:02
【问题描述】：

谁能告诉我下面的代码有什么问题？我试图让菜单在悬停在每个链接上时显示列表，但由于某种原因它不起作用。我已经尝试过.menu ul ul: hover {visibility: visible; }，但没有成功。

检查我的代码并提前感谢您。

  .menu {
  width: 100%;
  height: 50px;
  background-color: #222;
  font-family: 'Arial';
}

.menu ul {
  list-style: none;
  position: relative;
}

.menu ul li {
  width: 150px;
  float: left;
}

.menu a {
  padding: 15px;
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: #222;
  color: #fff;
}

.menu ul ul {
  position: absolute;
  visibility: hidden;
}

.menu ul li ul:hover {
  visibility: visible;
}

.menu a:hover {
  background-color: #f4f4f4;
  color: #fff;
}

<nav class="menu">
  <ul>
    <li><a href="#">test1</a></li>
    <li><a href="#">test2</a></li>
    <ul>
      <li><a href="#">test3</a></li>
      <li><a href="#">test4</a></li>
    </ul>
    <li><a href="#">test5</a></li>
    <ul>
      <li><a href="#">test6</a></li>
      <li><a href="#">test7</a></li>
      <li><a href="#">test8</a></li>
    </ul>
    <li><a href="#">test9</a></li>
  </ul>
</nav>

【问题讨论】：

悬停在哪些菜单项上时应该显示哪些元素？ test2 应该显示 test3 和 test4，对吗？与test5 一起显示test6、test7 和test8，对吧？

标签： html css drop-down-menu hover

【解决方案1】：

我稍微修改了您的代码。子导航 UL 现在嵌套在所需的 LI 中。当您将鼠标悬停在“test2”导航上时，它将显示子导航。

下面的 CSS 行也被修改了。而不是在子导航UL 上使用:hover，代码现在将使用子导航定位LI 并显示所需的。

.menu ul li ul:hover {

到

.menu ul li:hover > ul {

*{
  margin:0;
  padding:0;
  }
 .menu{
 width:100%;
 height:50px;
 background-color:#222;
 font-family:'Arial';

 }
 .menu ul{
 list-style:none;
 position:relative;
 }
 .menu ul li{
  width:150px;
  float:left;

 }
  .menu a{
  padding:15px;
  display:block;
  text-decoration:none;
  text-align:center;
  background-color:#222;
  color:#fff;
  }
  .menu ul ul{
   position:absolute;
   visibility:hidden;

    }
    
   /*CSS modified here: when you hover over LI with sub-nav, it will display the UL in it.*/
   .menu ul li:hover > ul{
    visibility:visible;
    border:1px solid #ff0000;
     }
    .menu a:hover{
    background-color:#f4f4f4;
    color:#fff;
     }

<body> 
  <nav class="menu">
  <ul>
    <li><a href="#">test1</a></li>
    <li><a href="#">test2</a>
      
      <!-- nested UL in LI -->
      <ul>
        <li><a href="#">test3</a></li>
        <li><a href="#">test4</a></li>
      </ul>
    </li>
    <li><a href="#">test5</a>
      <!-- nested UL in LI -->
      <ul>
        <li><a href="#">test6</a></li>
        <li><a href="#">test7</a></li>
        <li><a href="#">test8</a></li>
      </ul>   
    </li>    
    <li><a href="#">test9</a></li>
  </ul>
  </nav>
</body>
</html>

【讨论】：