<分区>
<分区>
.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>我正在尝试在我的下拉悬停上添加过渡。但是我无法识别正确的位置，因为我必须在哪里编写代码。如果我将鼠标悬停在菜单上，我想要。下拉会顺利出现。这是一个巨大的下降，并在悬停时迅速出现。我只是想让它慢一点。所以它看起来棒极了。
最佳答案
您主要需要将过渡添加到您的子菜单类。我已经添加了代码，如果您有任何困惑，请告诉我
.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>关于html - 如何在下拉菜单中添加过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56913833/