当悬停在菜单上时下拉子菜单

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>

当悬停在菜单上时下拉子菜单

When Hovered on a menu drop down a submenu

html

css

hover

submenu

drop-down-menu