将鼠标悬停在一级菜单项上时，使二级纯 CSS 下拉菜单出现答案

【问题标题】：Making 2nd level pure CSS dropdown menu to appear when hovering over 1st level menu item将鼠标悬停在一级菜单项上时，使二级纯 CSS 下拉菜单出现
【发布时间】：2016-11-27 15:40:46
【问题描述】：

我使用纯 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>

【问题讨论】：

“2rd”到底是什么？
请提供您尝试过的代码
你好@RobynOverstreet，上面提到了CSS和HTML代码！
嗨@connexo，请参阅我的帖子的最新更改/编辑。

标签： css

【解决方案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>

【讨论】：

你好@jbutler483。非常感谢您提供的帮助！我运行了你发送的代码 sn-p 并将代码复制到我的 css 文件中，它就像一个魅力！从来没想过我能把我的菜单弄好。无论如何，非常感谢，因为你摇滚！
@RazmanF 如果这对您有用，并且您很乐意接受它作为您问题的答案，请随时单击我的答案左侧的复选标记以接受它；）