如何制作流畅的下拉菜单 { 最好用 css3 或带解释的小 JS 行 }

Question

我需要在没有 javascript/jquery 的情况下制作下拉菜单，或者从他们那里一点一点地制作，我试图避免使用 js，因为我是这方面的初学者。

我一直在尝试 Css3 来完成这件事，在多次失败后我通过动画实现了它但是在设置动画延迟属性时它仍然存在一些错误并且有代码：

* {
  list-style-type: none;
  text-decoration: none;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  margin: 0;
  padding: 0;
}

nav > ul {
  margin: 0px auto;
  padding: 0;
  text-align: center
}

nav > ul > li {
  display: inline-block;
  position: relative
}

nav > ul > li > a {
  display: block;
  width: 100px;
  height: 30px;
  background-color: #7f8c8d;
  color: #fff;
  padding-top: 10px
}


/* ANIMATE UL TO SLIDE DOWN WHEN HOVER */

nav > ul > li > ul {
  margin: 0;
  padding: 0;
  height: auto;
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  animation-name: slideUp;
  animation-duration: 150ms;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transition: all 3s ease;
}

nav > ul > li:hover > ul {
  animation-name: slideDown;
  visibility: visible;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-fill-mode: backwards;
  animation-timing-function: linear;
}

@keyframes slideDown {
  from {
    height: 0px
  }
  to {
    height: 200px
  }
}

@keyframes slideUp {
  from {
    height: 200px
  }
  to {
    height: 1px
  }
}


/* END ANIMATION */

nav > ul > li > ul > li {
  position: relative;
  display: block;
  box-sizing: border-box;
  margin-top: 1px
}

nav > ul > li > ul > li > a {
  display: inline-block;
  width: 100px;
  height: 30px;
  padding-top: 10px;
  background: #bdc3c7;
  color: #000
}

<body>
  <nav>
    <ul>
      <li>
        <a href="#">Menu li</a>
        <ul>
          <li class="sub"><a href="#">sub</a>
          </li>
          <li class="sub"><a href="#">sub</a>
          </li>
          <li class="sub"><a href="#">sub</a>
          </li>
          <li class="sub"><a href="#">sub</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Menu li</a>
        <ul>
          <li><a href="#">sub</a>
          </li>
          <li><a href="#">sub</a>
          </li>
          <li><a href="#">sub</a>
          </li>
          <li><a href="#">sub</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Menu li</a>
        <ul>
          <li><a href="#">sub</a>
          </li>
          <li><a href="#">sub</a>
          </li>
          <li><a href="#">sub</a>
          </li>
          <li><a href="#">sub</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Menu li</a>
      </li>
      <li>
        <a href="#">Menu li</a>
      </li>
    </ul>
  </nav>
</body>

有一个code没有设置延迟

这是在设置动画延迟时属性 codepin

提前致谢。

Answer 1

我只是删除了您的一些 css，从而减少了错误。此类任务不需要高级动画属性。

这些是我更改的属性：

nav > ul > li > ul {
    margin: 0;
    padding: 0;
    position: absolute;
    overflow: hidden;
    transition: all 3s ease;
    height: 0;
}

nav > ul > li:hover > ul {
    height: 200px;
}

这是 updated codepen

如何制作流畅的下拉菜单 { 最好用 css3 或带解释的小 JS 行 }

How to make smooth slide down menu { Preferably by css3 or little JS lines with explanation }

javascript

css

jquery

slide

drop-down-menu