Question

当我将鼠标悬停在菜单上时，它试图过渡到放置子菜单的位置，但是它不起作用。我将下拉菜单的高度设置为0px，当我将鼠标悬停在上面时，我希望它的高度为650px，因此看起来它在向下过渡。我需要帮助。

<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;
}

以下是参考图片：image

我知道这可能是重复的，但是我找不到适合我情况的任何东西。

Answer 1

由于您说过您不知道如何使用jquery，因此我将解决方案更改为css，因此代码如下：

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

当悬停在菜单上时，会出现一个子菜单

1 个答案: