流畅的下拉菜单

Question

我有一个悬停下拉菜单，里面有一些文本，它可以找到，但是当我悬停在它上面时，它只会出现在那里。我想让它以中等速度向下滑动。有没有一种简单的方法可以做到这一点？

html:

    <div class="dropdown">
  <button title="General Information" class="dropbtn">General Information</button>
  <div class="dropdown-content">
    <a href="#"><b>Life Span</b>: around 16y</a>
    <a href="#"><b>Adult Size</b>: 3-5 inches long</a>
    <a href="#"><b>Weight</b>: 1-3 oz</a>
    <a href="#"><b>Common Name</b>: White's Dumpy tree frog</a>
    <a href="#"><b>Scientific name</b>: <i>Litoria Caerulea</i></a>

CSS:

.dropbtn {
  border-radius: 12px;
  background-color: #6B8E23;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  border-radius: 12px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
}

.dropdown-content {
  border-radius: 12px;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  cursor: auto;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  cursor: auto;
  background-color: #495d29;
}

Answer 1

这可行：

.dropbtn {
  border-radius: 12px;
  background-color: #6B8E23;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  border-radius: 12px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
 
}

.dropdown-content {
  border-radius: 12px;
  opacity: 0;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
   transition: all linear 0.3s;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  cursor: auto;
}

.dropdown:hover .dropdown-content {
  transition: all linear 1s;
   opacity: 1;
}

.dropdown:hover .dropbtn {
   transition: all linear 1s;
  cursor: auto;
  background-color: #495d29;
 
}

Answer 2

您可以依靠 opacity、transform 和 transition 属性来提供更好的外观，这里是您的代码的一个小版本，仅供演示

.dropbtn {
  border-radius: 12px;
  background-color: #6B8E23;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  border-radius: 12px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
}

.dropdown-content {
  border-radius: 12px;
  /* display: none; */ 
  opacity: 0; /* here */
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
  transition: all 0.25s ease-in; /* here */
  transform: translateY(-10px); /* here */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  cursor: auto;
}

.dropdown:hover .dropdown-content {
/*   display: block; */ /* no need for display block and none, you can depend on opacity as long as the position is absolute*/
  transform: translateY(0); /* here */
  opacity: 1; /* here */
}

.dropdown:hover .dropbtn {
  cursor: auto;
  background-color: #495d29;
}

<div class="dropdown">
  <button title="General Information" class="dropbtn">General Information</button>
  <div class="dropdown-content">
    <a href="#"><b>Life Span</b>: around 16y</a>
    <a href="#"><b>Adult Size</b>: 3-5 inches long</a>
    <a href="#"><b>Weight</b>: 1-3 oz</a>
    <a href="#"><b>Common Name</b>: White's Dumpy tree frog</a>
    <a href="#"><b>Scientific name</b>: <i>Litoria Caerulea</i></a>
    </div>
    </div>

流畅的下拉菜单

Smooth drop-down menu

html

css

drop-down-menu