<分区>
标签 javascript html css
我的下拉菜单目前可以使用，但我怎样才能用它完成另外两件事:
这是 the codpen和一些片段代码:
HTML
<li>
<a>Products</a>
<div className="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
CSS
.subnav-block {
position: static;
width: 100% !important;
top: 54px;
left: 0;
padding: 20px 0 !important;
display: none;
height: 80px;
background: gray;
}
.nav:hover > li > .subnav-block {
display: block;
}
最佳答案
如果您使用 display:none 它会在转换过程中产生问题，因此最好使用 opacity:0; 和 visibility:hidden;已设置 display:none;。和
如果您不想下拉将其下方的内容向下推，则使用 position:absolute; 而不是 position:static;
这个 css 对我有用，所以也将这个 css 添加到您现有的 css 文件中:
.nav li {
list-style: none;
position:relative;
}
.subnav-block {
position: absolute;
width: 100% !important;
top: 54px;
left: 0;
padding: 20px 0 !important;
height: 140px;
background: gray;
opacity:0;
visibillity:hidden;
-webkit-transition: all 0.6s ease-in-out 0.15s;
-moz-transition: all 0.6s ease-in-out 0.15s;
-o-transition: all 0.6s ease-in-out 0.15s;
-ms-transition: all 0.6s ease-in-out 0.15s;
transition: all 0.6s ease-in-out 0.15s;
}
.nav > li:hover .subnav-block{
opacity:1;
visibilty:visiable;
}
谢谢
关于javascript - 将动画添加到下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56998528/