Question

我创建了一个使用纯CSS编码的导航栏，根本没有JavaScript编码。但我的浏览器界面有一个问题。当我将鼠标悬停在第一级菜单项（MAIN MENU项目的AKA子菜单）上时，我想显示我的第二级菜单项。但是根据目前的情况，当我将鼠标悬停在名为＆＃34; Online Services＆＃34;的主菜单项上时，我可以看到第一级菜单项，＆＃34;通信＆＃34;和相应的第二级菜单项列表，称为＆＃34;电子邮件＆＃34;，＆＃34;即时消息＆＃34;和＃34;社交网络＆＃34;一下子！

正如我上面所说，我想隐藏主菜单项的第二级菜单项，＆＃34; Online Services＆＃34;徘徊。但是，我想让它出现在第一级菜单项时，＆＃34;通信＆＃34;按照上面提到的当前情况徘徊。

这是我的HTML代码：

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

除非它是直接的孩子，否则它不会选择，而不是所有子元素。

＆gt;组合器分隔两个选择器，并仅匹配第二个选择器匹配的元素，这些元素是第一个匹配的元素的直接子元素。相反，当两个选择器与后代选择器组合时，组合选择器表达式匹配由第二选择器匹配的那些元素，其中存在与第一选择器匹配的祖先元素，而不管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>

将鼠标悬停在第1级菜单项上时，会显示第2级纯CSS下拉菜单

1 个答案: