html - HTML/CSS 中的下拉菜单

Question

我试图在 HTML/CSS 中创建一个下拉菜单，但我没有得到任何结果。我试图仅在 Channel button 悬停时才显示内容 div 。我尝试查看 w3schools，但没有帮助。

.NavWrapper {
	background: grey;
	max-width: 5000px;
	min-width: 500px;
	height: 50px;
	align: center;
	padding: 10px;
}
.Home {
	border: 0;
	color: black;
	background: white;
	height: 50px;
	width: 80px;
}
.Channel {
	border: 0;
	color: black;
	background: white;
	height: 50px;
	width: 80px;
	transition-duration: 0.3s;
	position: relative;
}
.Content-Wrapper {
	background: grey;
	max-width: 5000px;
	min-width: 500px;
	height: 50px;
	align: center;
	padding: 10px;
	display: none;
}
.Channel:hover, .Content-Wrapper {
	background: silver;
	color: black;
	display: inline-block;
}

<div class = "NavWrapper">
	<button class = "Home">
		Home
	</button>
	<button class = "Channel">
		Channel
	</button>
	<div class = "Content-Wrapper">
	<button class = "Content-Button">
		Hello World!
	</button>
</div>
</div>

Answer 1

尝试将 .Channel:hover, .Content-Wrapper 更改为 .Channel:hover + .Content-Wrapper。

就我个人而言，我会查看您的标记并使用 ul 和 li 来创建您想要做的事情，但这至少可以解决您的显示问题。