html - 子菜单 :before transition

Question

我正在尝试实现一个带有左边框的子菜单，它在悬停主导航元素时高度从 0% 过渡到 100%。由于某种原因，过渡不起作用。有帮助吗？

http://codepen.io/matthewmorrisux/pen/addLZE?editors=110

<div class="container">
  <nav class="menu">
    <ul>
      <li class="menu__item"><a href="">Home</a></li>
      <li class="menu__item"><a href="">About</a><ul class="sub-menu">
        <li class="sub-menu__item"><a href="">Item 1</a></li>
        <li class="sub-menu__item"><a href="">Item 2</a></li>
        <li class="sub-menu__item"><a href="">Item 3</a></li>
      </ul></li>
      <li class="menu__item"><a href="">Process</a></li>
      <li class="menu__item"><a href="">Contact</a></li>
    </ul>
  </nav>
</div>


.menu {
  position: relative;
}

.menu__item {
  position: relative;
  display: inline-block;
  padding: 20px;
}

.sub-menu {
  position: absolute;
  display: none;
}

.sub-menu:before {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 0px;
  background: black;
  transition: height 1s ease;
}

.menu__item:hover .sub-menu {
  display: block;
}

.menu__item:hover .sub-menu:before {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 100px;
  background: black;
  transition: height 1s ease;
}

Answer 1

您正在使用 display 属性在 none 和 block 之间切换可见性，这不适用于转换。

相反，尝试通过将高度设置为 0 来隐藏菜单及其内容:

.sub-menu {
  position: absolute;
  display: block;
  height: 0;
  overflow: hidden;
}

然后你的 .sub-menu 也需要一个高度:

.menu__item:hover .sub-menu {
  display: block;
  height: 100px;
}

http://codepen.io/anon/pen/addLPR?editors=110