使2级纯CSS下拉菜单在1级菜单项上方悬停时出现

Question

我已经使用纯CSS编码创建了一个导航栏，而根本没有JavaScript编码。但我在浏览器界面上有一个问题。当我用鼠标悬停在第一级菜单项(主菜单项的AKA子菜单)上时，我想让我的二级菜单项出现。但是根据目前的情况，当我悬停在名为“在线服务”的主菜单项上时，我可以同时看到第一级菜单项“沟通”和相应的第二级菜单项列表，称为“电子邮件”、“即时通讯”和“社交网络”！

因此，正如我上面所说的，当主菜单项“”悬停时，我想隐藏第二级菜单项。但是，我只想使它出现，当第一级菜单项，“沟通”是根据上述的现状徘徊。

以下是我的HTML代码：

​

@charset "utf-8";
 #navMenu {
  margin: 0;
  padding: 0;
}
#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 35px;
}
#navMenu li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
  background-color: #222;
}
#navMenu ul li a {
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  text-decoration: none;
  height: 40px;
  width: 170px;
  display: block;
  color: #fff;
  position: relative;
}
#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 40px;
}
#navMenu ul ul ul {
  position: absolute;
  visibility: hidden;
  display: inline-block;
  top: 0px;
  margin-left: 160px;
}
#navMenu ul li:hover ul {
  visibility: visible;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The Information Age</title>

  <link href="css/dropDown.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="wrapper">
    <div id="navMenu">
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Online Services</a>
          <ul>
            <li><a href="#">Communication</a>
              <ul>
                <li><a href="#">Email</a>
                </li>
                <li><a href="#">Instant Messaging</a>
                </li>
                <li><a href="#">Social Networking</a>
                </li>


              </ul>
              <!--inner 2nd UL-->

              <li><a href="#">Online Education</a>
              </li>
              <li><a href="#">Online Entertainment</a>
              </li>
              <li><a href="#">E-Commerce</a>
              </li>
              <li><a href="#">Web Storage</a>
              </li>





            </li>
            <!--inner LI-->
          </ul>
          <!--end inner UL-->




        </li>
        <!--end main LI-->
      </ul>
      <!--end main UL-->


    </div>
    <!--end navMenu-->
  </div>
  <!--end wrapper div-->






</body>

</html>

​

Answer 1

您需要在悬停时选择直接后代：

#navMenu ul li:hover > ul {
  visibility: visible;
}

这样它就不会选择，除非它是一个直接的子元素，而不是所有的子元素。

>组合器分离两个选择器，只匹配第二个选择器匹配的元素，这些元素是第一个选择器匹配的元素的直接子元素。相反，当两个选择器与后代选择器组合时，组合的选择器表达式与第二个选择器匹配的元素匹配，而第一个选择器对应有一个祖先元素，而不考虑DOM上的“跳”数。~ MDN

完整的演示可以在下面看到：

​

@charset "utf-8";
 #navMenu {
  margin: 0;
  padding: 0;
}
#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 35px;
}
#navMenu li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
  background-color: #222;
}
#navMenu ul li a {
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  text-decoration: none;
  height: 40px;
  width: 170px;
  display: block;
  color: #fff;
  position: relative;
}
#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 40px;
}
#navMenu ul ul ul {
  position: absolute;
  visibility: hidden;
  display: inline-block;
  top: 0px;
  margin-left: 160px;
}
#navMenu ul li:hover > ul {
  visibility: visible;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The Information Age</title>

  <link href="css/dropDown.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="wrapper">
    <div id="navMenu">
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Online Services</a>
          <ul>
            <li><a href="#">Communication</a>
              <ul>
                <li><a href="#">Email</a>
                </li>
                <li><a href="#">Instant Messaging</a>
                </li>
                <li><a href="#">Social Networking</a>
                </li>


              </ul>
              <!--inner 2nd UL-->

              <li><a href="#">Online Education</a>
              </li>
              <li><a href="#">Online Entertainment</a>
              </li>
              <li><a href="#">E-Commerce</a>
              </li>
              <li><a href="#">Web Storage</a>
              </li>





            </li>
            <!--inner LI-->
          </ul>
          <!--end inner UL-->




        </li>
        <!--end main LI-->
      </ul>
      <!--end main UL-->


    </div>
    <!--end navMenu-->
  </div>
  <!--end wrapper div-->






</body>

</html>

​