Question

我的下拉菜单当前有效，但是我想如何用它完成另外两件事：

添加动画（CSS或JS）
该下拉列表不应将其下方的内容下推

这里是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;
}

Answer 1

如果您使用display:none，则会在过渡过程中产生问题，因此最好使用opacity:0;的{{1}}和visibility:hidden;。和如果您不希望将其下方的下拉内容下拉，则使用display:none;代替position:absolute;

此css对我有用，因此也请在您现有的css文件中添加此css：

position:static;

谢谢

Answer 2

您可以使用css属性位置：absolute来完成目标，在这里您将要做的事情

<li class="nav-item">
          <a>Products</a>

          <div className="subnav-block">
            <ul>
              <li>
                <a>Product A</a>
              </li>
              <li>
                <a>Product B</a>
              </li>
            </ul>
          </div>
        </li>

这是CSS

.nav-item{
position: relative;
}
        .subnav-block{
           position: absolute;
           min-width: 215px /* or any width fits your idea */
           top: 100%;
           padding: .5rem 1rem;
           background: #fff;
           box-shadow: 0 0 10px 0 rgba(0,0,0,.18);
           transition: all .3s;
           opacity: 0;
           visibility: hidden;
           transform: translateY(10px); /* i choosed translate for animation, you can choose what you prefer */
        }
    .nav-item:hover .subnav-block{
        opacity: 1;
        visibility
        transform: translateY(0)
    }

了解有关在w3school css transform上进行转换的更多信息

将动画添加到下拉菜单

2 个答案: