我使用纯 CSS 编码创建了一个导航栏，完全没有使用 JavaScript 编码。但是我在它的浏览器界面中遇到了一个问题。当我将鼠标悬停在第一级菜单项(也就是主菜单项的子菜单)上时，我想让我的第二级菜单项出现。但根据目前的情况，当我将鼠标悬停在名为“在线服务”的主菜单项上时，我可以看到一级菜单项“通讯”和相应的二级菜单项列表，称为“电子邮件”、“即时消息” ”和“社交网络”同时出现!
所以正如我上面所说，当主菜单项“在线服务”悬停时，我想隐藏二级菜单项。但是，我想让它只出现，当一级菜单项“通信”根据上面提到的当前情况悬停时。
这是我的 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>最佳答案
您需要在悬停时选择直接后代:
#navMenu ul li:hover > ul {
visibility: visible;
}
这样它就不会选择，除非它是直接子元素，而不是所有子元素。
The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the 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>关于css - 将鼠标悬停在一级菜单项上时，使二级纯 CSS 下拉菜单出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40830694/