Question

.topmenu-header ul {
  position: absolute;
  list-style-type: none;
  width: 100%;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul li {
  cursor: pointer;
  float: left;
  color: white;
  padding: 15px 60px 15px 25px;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul .dropdown {
  position: relative;
  background: red;
  padding: 16px;
  color: white;
  transition: all 5s ease 0s;
}

.topmenu-header .dropdown {
  top: 100%;
  left: inherit;
  display: none;
}

.topmenu-header li:hover .dropdown {
  background: pink;
  transition-delay: 0s;
  display: block;
}

<header class="topmenu-header">
  <ul>
    <li class="top-left-list-border">CATEGORIES
      <div class="dropdown">
        <h3>DONE</h3>
      </div>
    </li>
    <li>SPECIALS
      <div class="dropdown">
        <h3>DONE2</h3>
      </div>
    </li>
    <li>QUICK LINK</li>
    <li>MANUFACTURES</li>
    <li>INFO</li>
    <li class="top-right-list-border">SHIPPING & RETURNS</li>
  </ul>
</header>

我正在尝试在下拉鼠标悬停上添加过渡效果。但是我无法识别正确的地方，因为我必须编写代码。我想要如果我将菜单悬停。下拉列表将顺利显示。这是一个巨大的下降，并在悬停时迅速上升。我只是想让它慢一点。所以看起来很棒。

Answer 1

您主要需要向子菜单类添加过渡。我添加了代码，如果您有任何疑问，请告诉我

.topmenu-header ul {
  position: absolute;
  list-style-type: none;
  width: 100%;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul li {
  cursor: pointer;
  float: left;
  color: white;
  padding: 15px 60px 15px 25px;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul .dropdown {
  position: relative;
  background: red;
  padding: 16px;
  color: white;
  transition: all 5s ease 0s;
}

.sub-menu-parent {
  position: relative;
}

.sub-menu {
  background: pink;
  text-align: center;
  display: block;
  visibility: hidden;
  /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s
}

.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:focus-within .sub-menu,
.sub-menu-parent:hover .sub-menu {
  visibility: visible;
  /* shows sub-menu */
  opacity: 1;
  z-index: 1;
  transition-delay: 0s, 0s, 0.3s;
}

.topmenu-header .dropdown {
  top: 100%;
  left: inherit;
  display: none;
}

<header class="topmenu-header">
  <ul>
    <li class="top-left-list-border">CATEGORIES
      <div class="dropdown">
        <h3>DONE</h3>
      </div>
    </li>
    <li class="sub-menu-parent">SPECIALS
      <div class="sub-menu">
        <h3>DONE2</h3>
      </div>
    </li>
    <li>QUICK LINK</li>
    <li>MANUFACTURES</li>
    <li>INFO</li>
    <li class="top-right-list-border">SHIPPING & RETURNS</li>
  </ul>
</header>

Answer 2

在更改opacity时过渡max-height（但不过渡）。请注意，我还删除了float: left;，而是将ul设为flex容器。

.topmenu-header ul {
  position: relative;
  list-style-type: none;
  display: flex;
  background: rgba(255, 0, 0, 1);
  flex-wrap: wrap;
}

.topmenu-header ul li {
  cursor: pointer;
  color: white;
  padding: 15px 60px 15px 25px;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul .dropdown {
  position: absolute;
  background: red;
  color: white;
  max-height: 0;
  overflow: hidden;
  transition: opacity .4s ease 0s;
}

.topmenu-header .dropdown {
  left: inherit;
  opacity: 0;
}

.topmenu-header li:hover .dropdown {
  background: pink;
  padding: 16px;
  max-height: 1000px;
  opacity: 1;
}

<header class="topmenu-header">
  <ul>
    <li class="top-left-list-border">CATEGORIES
      <div class="dropdown">
        <h3>DONE</h3>
      </div>
    </li>
    <li>SPECIALS
      <div class="dropdown">
        <h3>DONE2</h3>
      </div>
    </li>
    <li>QUICK LINK</li>
    <li>MANUFACTURES</li>
    <li>INFO</li>
    <li class="top-right-list-border">SHIPPING & RETURNS</li>
  </ul>
</header>

Answer 3

并非所有CSS属性都可以设置动画。这是MDN list of properties that can be animated-您将看到display不在列表中，因此无法实现从display:hidden到display:block的变化动画。

浏览上面的列表，并确定要设置动画的属性，然后就可以创建可行的东西。在下面的示例中，我只是选择了height属性，您可以看到它的动画效果很好。

.topmenu-header ul {
  position: absolute;
  list-style-type: none;
  width: 100%;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul li {
  cursor: pointer;
  float: left;
  color: white;
  padding: 15px 60px 15px 25px;
  background: rgba(255, 0, 0, 1);
}

.topmenu-header ul .dropdown {
  position: relative;
  background: red;
  padding: 16px;
  color: white;
  transition: all 1.5s ease 0s;
}

.topmenu-header .dropdown {
  top: 100%;
  left: inherit;
  Xdisplay: none;
  height:0px;
  overflow:hidden;
}

.topmenu-header li:hover .dropdown {
  background: pink;
  transition-delay: 0s;
  xdisplay: block;
  height:50px;
}

<header class="topmenu-header">
  <ul>
    <li class="top-left-list-border">CATEGORIES
      <div class="dropdown">
        <h3>DONE</h3>
      </div>
    </li>
    <li>SPECIALS
      <div class="dropdown">
        <h3>DONE2</h3>
      </div>
    </li>
    <li>QUICK LINK</li>
    <li>MANUFACTURES</li>
    <li>INFO</li>
    <li class="top-right-list-border">SHIPPING & RETURNS</li>
  </ul>
</header>

如何在下拉菜单中添加转换？

3 个答案: