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

子菜单：转换前

1 个答案: