下拉式菜单;悬停css不适用于兄弟姐妹成员，但适用于后代成员

问题描述 投票：0回答：3

下面有两个代码。代码用于下拉菜单。两个代码几乎相同，但差别很小。我已经为主菜单创建了一个主列表项，并为其提供了类。然后我创建了一个子菜单并给它类菜单。主标题给出了类标题，并且每个元素都有元素。当我将（：hover）on（anchor element）元素与on子菜单（下拉元素）结合使用时，代码不起作用。如果我在类标题（元素类）上应用“：hover”，则下拉工作。我正在分享代码以澄清并更具体。以下代码适用于下拉菜单，并悬停在标题类上。我已经在css的代码中评论过，以澄清我所指的代码的哪一部分。

.menu{
	padding: 20px;
	background: #d80000;
}
.mainmenu{
	display: flex;
	list-style: none;
}
.heading{
	margin-right: 1px;
}
.mainmenu .heading a{
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	background: #fff;
	color: #d80000;
	width: 80px;
	text-align: center;
	position: relative;
}

.submenu{
	list-style: none;
	margin-left: -40px;
	display: none;
	position: absolute;
}

.submenu a{
	border-top: 3px solid #d80000;
	width: 80px;
}

.heading a:hover{
	background: #d80000;
	color: #fff;
}

/* Here the hover and submenu element works to make the element display as block*/
.heading:hover .submenu{
	display: block;
}
<html>
	<head> 
		<title>Menu</title>
		<link rel="stylesheet" type="text/css" href="style5.css">
	</head>
	<body>
	<div class="menu">
			<ul class="mainmenu">
				<li class="heading"><a href="#">Home</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">About</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Services</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Products</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Contact</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

现在我将发布不适用于下拉菜单的代码。在此元素中，将鼠标与子菜单类一起应用。

.menu{
	padding: 20px;
	background: #d80000;
}
.mainmenu{
	display: flex;
	list-style: none;
}
.heading{
	margin-right: 1px;
}
.mainmenu .heading a{
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	background: #fff;
	color: #d80000;
	width: 80px;
	text-align: center;
	position: relative;
}

.submenu{
	list-style: none;
	margin-left: -40px;
	display: none;
	position: absolute;
}

.submenu a{
	border-top: 3px solid #d80000;
	width: 80px;
}

.heading a:hover{
	background: #d80000;
	color: #fff;
}

/* Here the hover on a and submenu element doesnot works to make the element display as block*/
.heading a:hover .submenu{
	display: block;
}
<html>
	<head> 
		<title>Menu</title>
		<link rel="stylesheet" type="text/css" href="style5.css">
	</head>
	<body>
	<div class="menu">
			<ul class="mainmenu">
				<li class="heading"><a href="#">Home</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">About</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Services</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Products</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Contact</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

所以我的问题是为什么代码适用于第一个代码而不适用于第二个代码。第二个代码悬停在元素上，而第一个代码悬停在主菜单的元素类上。

html css html5 css3 drop-down-menu
3个回答
0
投票
 .heading a:hover .submenu
                 ^

那里有一个后代组合子。

<li class="heading"><a href="#">Home</a>
     <ul class="submenu">

在这里，.submenu是a元素的兄弟，而不是后代。

你需要一个sibling combinators

0
投票

你没有在第二个使用a所以使用

.heading a:hover .submenu{
    display: block;
}

在这里你犯了错误：

.heading:hover .submenu{
    display: block;
}
0
投票

使用general sibling selector选择.submenu的.heading a:hover兄弟姐妹。例如：

.heading a:hover ~ .submenu{
    display: block;
}

但是，现在当你将指针向下移动到子菜单本身时，你不再在a上盘旋，所以子菜单将恢复为display:none;。为了解决这个问题，我们可以坚持认为.submenu本身就是display:block;。例如：

.heading .submenu:hover {
    display: block;
}

工作演示：

.menu{
	padding: 20px;
	background: #d80000;
}
.mainmenu{
	display: flex;
	list-style: none;
}
.heading{
	margin-right: 1px;
}
.mainmenu .heading a{
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	background: #fff;
	color: #d80000;
	width: 80px;
	text-align: center;
	position: relative;
}

.submenu{
	list-style: none;
	margin-left: -40px;
	display: none;
	position: absolute;
}

.submenu a{
	border-top: 3px solid #d80000;
	width: 80px;
}

.heading a:hover{
	background: #d80000;
	color: #fff;
}

/* Use general sibling selector to select .submenu siblings of .heading a:hover*/
.heading a:hover ~ .submenu{
	display: block;
}
/* however, now when you move your pointer down to the submenu itself you're no longer hovering on the a so the submenu will go back to display none; To resolve this we can insist that the submenu themselves are display block when hovered: */
.heading .submenu:hover {
	display: block;
}
<html>
	<head> 
		<title>Menu</title>
		<link rel="stylesheet" type="text/css" href="style5.css">
	</head>
	<body>
	<div class="menu">
			<ul class="mainmenu">
				<li class="heading"><a href="#">Home</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">About</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Services</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Products</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
				<li class="heading"><a href="#">Contact</a>
					<ul class="submenu">
						<li class="items"><a href="#">A</a></li>
						<li class="items"><a href="#">B</a></li>
						<li class="items"><a href="#">C</a></li>
						<li class="items"><a href="#">D</a></li>
						<li class="items"><a href="#">E</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.