CODEWITHSUNDEEP
htmlcss
EgMusic
EgMusic

Reputation: 134

Drop-down Menu in HTML/CSS

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>

Upvotes: 2

Views: 161

Answers (3)

kyun
kyun

Reputation: 10254

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

Upvotes: 1

P.S.
P.S.

Reputation: 16384

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>

Upvotes: 2

defteH
defteH

Reputation: 141

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.

Upvotes: 2

Related Questions