When Hovered on a menu drop down a submenu

Question

I'm trying to make it to where when I hover over the menu it transitions into dropping the submenu, but it is not working. I set the dropdown menu's height to 0px and when I hover I want it to be 650px so it looks like it's transitioning downwards. I need help, please.

<div class="dropdownform"> <div class="firstdropdown"> <div class="firstblock">Background</div> <div class="firstblock">Goals</div> <div class="firstblock">Achievments</div> </div> <div class="seconddropdown"> <div class="secondblock">Future</div> <div class="secondblock">College</div> <div class="secondblock">Hot 50 Flyer</div> </div> <div class="thirddropdown"> <div class="thirdblock">Letter To Freshmen</div> <div class="thirdblock">Letter of Recommendation</div> <div class="thirdblock">Scholarship Essay</div> </div> </div> .dropdownform { display: flex; flex-direction: row; position: relative; left: 5px; justify-content: space-between; margin-right: 712px; bottom: 35px; } .firstdropdown { position: relative; width: 250px; height: 0px; background-color: black; right: 2.5px; display: flex; flex-direction: column; justify-content: center; align-items: center; justify-content: space-around; border-bottom-right-radius: 35px; border-bottom-left-radius: 35px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden; } .seconddropdown { position: relative; width: 250px; height: 0px; background-color: black; right: .3px; display: flex; flex-direction: column; justify-content: center; align-items: center; justify-content: space-around; border-bottom-right-radius: 35px; border-bottom-left-radius: 35px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden; } .thirddropdown { position: relative; width: 250px; height: 0px; background-color: black; left: 1.8px; display: flex; flex-direction: column; justify-content: center; align-items: center; justify-content: space-around; border-bottom-right-radius: 35px; border-bottom-left-radius: 35px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden; } .firstblock { position: relative; width: 200px; height: 50px; background-color: white; border-radius: 35px; display: flex; justify-content: center; align-items: center; } .secondblock { position: relative; width: 200px; height: 50px; background-color: white; border-radius: 35px; display: flex; justify-content: center; align-items: center; } .thirdblock { position: relative; width: 200px; height: 50px; background-color: white; border-radius: 35px; display: flex; justify-content: center; align-items: center; } .first:hover + .firstdropdown { height: 650px; transition: .5s ease-in-out; }

Here's a reference image: image

I know this might be a duplicate but I didn't find anything that fit my situation.

you are using .first but there's no class named .first, do we miss some code or is ur code wrong? — Ramon de Vries
– Ramon de Vries, Commented Dec 17, 2018 at 7:52
How about following some good tutorials like this one on W3C schools? — Ludovit Mydla
– Ludovit Mydla, Commented Dec 17, 2018 at 7:53
srry couldn't add the whole code but there is a .first, here: <section class="mainbackground"> <div class="mainform"> <div class="sliderform"> <div class="first">First</div> <div class="second">Second</div> <div class="third">Third</div> </div> — Altaf Aria
– Altaf Aria, Commented Dec 17, 2018 at 7:54
@AltafAria can u make a jsfidde using all the code you have to make it a dropdown?, find jsfiddle here www.jsfiddle.net — Ramon de Vries
– Ramon de Vries, Commented Dec 17, 2018 at 7:56

Ramon de Vries · Accepted Answer · 2018-12-17 08:45:12Z

Since u said u don't know how to use jquery i've changed my solution to css, here's the code:

.mainbackground {	position: absolute;	width: 100%;	height: 100%;	background-color: #1CADF8;	left: 0;	top: 0; } .first {	position: relative;	width: 250px;	height: 50px;	background-color: #321896;	border-radius: 35px;	display: flex;	justify-content: center;	align-items: center;	color: white; } .second {	position: relative;	width: 250px;	height: 50px;	background-color: #321896;	border-radius: 35px;	display: flex;	justify-content: center;	align-items: center;	color: white; } .third {	position: relative;	width: 250px;	height: 50px;	background-color: #321896;	border-radius: 35px;	display: flex;	justify-content: center;	align-items: center;	color: white; } .mainform {	position: relative;	display: flex;	flex-direction: row;	justify-content: space-between;	align-items: center;	margin: 5px 2.5px 0px 2.5px; } .form { position: relative; width: 250px; height: 50px; background-color: white; border-radius: 35px; } .form { display: flex; } .search { position: relative; background: transparent; outline: none; border: none; top: 1px; left: 10px; } .searchbutton { display: flex; position: relative; width: 48px; height: 48px; border-radius: 35px; background: #321896; border: none; outline: none; left: 43px; top: 1px; justify-content: center; align-items: center; } .search { font-size: 25px; width: 158px; } .loading { position: relative; border: 2px solid white; width: 25px; height: 25px; border-radius: 35px; border-style: dotted; animation: test 3s infinite; display: flex; justify-content: center; } @keyframes test { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pi { color: white; animation: test2 3s infinite; padding-top: 1.5px; } @keyframes test2 { 0% { transform: rotate(0deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-360deg); opacity: 0; } } .logout {	position: relative;	width: 250px;	height: 50px;	background-color: #E70D0D;	border-radius: 35px; } .navform {	position: relative;	display: flex;	flex-direction: row;	justify-content: space-between;	flex: 2; } .sliderform {	display: flex;	flex-direction: row;	justify-content: space-between;	margin-right: 150px;	flex: 3; } .dropdownform {	display: flex;	flex-direction: row;	position: relative;	left: 5px;	justify-content: space-between;	margin-right: 712px;	bottom: 35px; } .firstdropdown {	position: absolute;/* < new code */ top: 50px;/* < new code */	width: 250px;	height: 0px;	background-color: black;	right: 2.5px;	display: flex;	flex-direction: column;	justify-content: center;	align-items: center;	justify-content: space-around;	border-bottom-right-radius: 35px;	border-bottom-left-radius: 35px;	border-top-right-radius: 12px;	border-top-left-radius: 12px;	overflow: hidden; } .seconddropdown {	position: absolute;/* < new code */ top: 50px;/* < new code */	width: 250px;	height: 0px;	background-color: black;	right: .3px;	display: flex;	flex-direction: column;	justify-content: center;	align-items: center;	justify-content: space-around;	border-bottom-right-radius: 35px;	border-bottom-left-radius: 35px;	border-top-right-radius: 12px;	border-top-left-radius: 12px;	overflow: hidden; } .thirddropdown {	position: absolute;/* < new code */ top: 50px;/* < new code */	width: 250px;	height: 0px;	background-color: black;	left: 1.8px;	display: flex;	flex-direction: column;	justify-content: center;	align-items: center;	justify-content: space-around;	border-bottom-right-radius: 35px;	border-bottom-left-radius: 35px;	border-top-right-radius: 12px;	border-top-left-radius: 12px;	overflow: hidden; } .firstblock {	position: relative;	width: 200px;	height: 50px;	background-color: white;	border-radius: 35px;	display: flex;	justify-content: center;	align-items: center; color: #000;/* < new code */ } .secondblock {	position: relative;	width: 200px;	height: 50px;	background-color: white;	border-radius: 35px;	display: flex;	justify-content: center;	align-items: center; color: #000;/* < new code */ } .thirdblock {	position: relative;	width: 200px;	height: 50px;	background-color: white;	border-radius: 35px;	display: flex;	justify-content: center;	align-items: center; color: #000;/* < new code */ } .first:hover .firstdropdown {/* < new code */	height: 650px;	transition: .5s ease-in-out; } .second:hover .seconddropdown {/* < new code */	height: 650px;	transition: .5s ease-in-out; } .third:hover .thirddropdown {/* < new code */	height: 650px;	transition: .5s ease-in-out; }

<!DOCTYPE html> <html> <head>	<title></title>	<link rel="stylesheet" type="text/css" href="/css/main.css"> </head> <body> <section class="mainbackground">	<div class="mainform">	<div class="sliderform">	<div class="first"> <h3> First </h3> <div class="firstdropdown"> <div class="firstblock">Background</div> <div class="firstblock">Goals</div> <div class="firstblock">Achievments</div> </div> </div>	<div class="second"> <h3>Second</h3> <div class="seconddropdown"> <div class="secondblock">Future</div> <div class="secondblock">College</div> <div class="secondblock">Hot 50 Flyer</div> </div> </div>	<div class="third"> <h3>Third</h3> <div class="thirddropdown"> <div class="thirdblock">Letter To Freshmen</div> <div class="thirdblock">Letter of Recommendation</div> <div class="thirdblock">Scholarship Essay</div> </div> </div>	</div>	<div class="navform">	<div class="form">	<input type="text" placeholder="#CODE" class="search">	<a href="main.html" class="searchbutton"> <div class="loading"> <div class="pi">π</div> </div>	</a>	</div>	<a href="" class="logout"></a> </div>	</div> </section> </body> </html>

Collectives™ on Stack Overflow

When Hovered on a menu drop down a submenu

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related