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

Posted

技术标签:

【中文标题】列表项“li:hover”不起作用【英文标题】：List item `li:hover` is not working 【发布时间】：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，对吧？ 【参考方案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>

【讨论】：

以上是关于列表项“li:hover”不起作用的主要内容，如果未能解决你的问题，请参考以下文章

CSS LI hover - 浏览器兼容？

如果列表项有链接，setOnItemClickListener 不起作用

可拖动的innerHTML列表项不起作用

CSS3 垂直弹出菜单 + 过渡在 FF 中不起作用

列表项 longClickListener 打开对话框在 android 中不起作用？

jquery悬停在我的列表项上不起作用