CSS如何在下拉菜单上创建过渡

Question

我知道存在更多此类问题。所以我提前道歉。我尝试了我找到的解决方案，但在我的情况下没有任何效果。这是我的 CSS 代码。当用户将鼠标悬停在菜单上时，我需要菜单淡入淡出。我试图将 transition: all 0.4s ease 0s; 应用于所有选项只是为了看看是否有任何工作......没有工作。欢迎所有帮助！

  /* Dropdown Button */
.dropbtn {
 
  padding: 5px;
  
  border: none;
  transition: all 0.4s ease 0s;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  transition: all 0.4s ease 0s;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background: linear-gradient(
135deg
, rgba(89, 89, 89, 0.6) 0%, rgba(64, 64, 64, 0.4) 50%, rgba(89, 89, 89, 0.6) 100%);
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  z-index: 1; padding: 10px;
  transition: all 0.4s ease 0s;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 18px 18px;
  text-decoration: none;
  display: block;
  transition: all 0.4s ease 5s;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;
transition: all 0.4s ease 5s;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;
transition: all 0.4s ease 5s;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn { background: rgba(33, 97, 140, 0.7);
  transition: all 0.5s ease 0s;}