Question

有谁可以告诉我下面的代码有什么问题？当我将鼠标悬停在每个链接上时，我试图让菜单显示列表，但由于某种原因它不起作用。我已经尝试.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>

Answer 1

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

下面的CSS行也被修改了。现在，代码不会在子导航:hover上使用UL，而是使用子导航定位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`无效

1 个答案: