Smooth drop-down menu-CodePudding

I have a hover drop down menu with some text in it, and it works find, but when I hover on it it just appears there. I would like for it to slide down at a medium speed. Is there a simple way to make it do that?

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

CodePudding user response：

This can work:

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

CodePudding user response：

you can depend on the opacity, transform, and transition properties to provide a nicer look, here's a little edition on your code just for demonstration

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