Drop-down Menu in HTML/CSS

Question

I am trying to create a drop-down menu in HTML/CSS, but I am not getting anywhere. I am trying to display the content div ONLY when the Channel button is being hovered on. I tried looking at w3schools, but it didn't help.

.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

Try changing .Channel:hover, .Content-Wrapper to .Channel:hover + .Content-Wrapper.

Personally I would look at your markup and use ul's and li's to create what you're trying to do, but that at least fixes your display issue.

Answer 2

I'm using mouseover and mouseleave events to show and hide the target. Here is the working example:

$('.Channel').on('mouseover', function() {
  $('.Content-Wrapper').show()
})

$('.Channel').on('mouseleave', function() {
  $('.Content-Wrapper').hide()
})

.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;
  background: silver;
	color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 3

.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;
    margin-top: 10px;
}
.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>