Question

我有一个垂直导航菜单，我希望能够将其悬停在父项上以显示他们的孩子。我希望孩子们从他们的父母那里“摔倒”并“推”其他项目（孩子最初不会显示）。

这是我使用webkit过渡和翻译失败的CSS尝试：

.children a {
  display: none;
  visibility: hidden;
  -ms-transform: translate(0, 50px); /* IE 9 */
  -webkit-transform: translate(0, 50px); /* Safari */
  transform: translate(0, 50px);

  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.page_item_has_children:hover .children a {
  display: block;
  visibility: visible;
}

HTML：

    <nav class="site-nav">
      <li class="page_item page-item-15"><a href="http://localhost:8888/myWebsite/">Home</a></li>
      <li class="page_item page-item-22 page_item_has_children"><a href="http://localhost:8888/myWebsite/About/">About</a>
<ul class='children'>
    <li class="page_item page-item-81"><a href="http://localhost:8888/myWebsite/About/Me">Me</a></li>
    <li class="page_item page-item-83"><a href="http://localhost:8888/myWebsite/About/Us">Us</a></li>
</ul>
    <li class="page_item page-item-20"><a href="http://localhost:8888/myWebsite/Page1/">Page1</a></li>
    <li class="page_item page-item-25"><a href="http://localhost:8888/myWebsite/Page2/">Page2</a></li>

</li>
    </nav>

（这是为Wordpress生成的PHP）。

所以我想要的是让我和我们在悬停时从“关闭”中“堕落”。

我知道我使用了translate错误，因为当我希望它们落在他们所属的位置时，它会推动儿童物品。我希望我很清楚。非常感谢！

Answer 1

一种方法是在主菜单上设置背景颜色，绝对定位子菜单，使用否定z-index将子菜单放在父菜单下，然后使用transform: translateY()进行转换

* {margin:0;padding:0;}

.site-nav {
  position: relative;
  background: white;
}

.children {
  transition: all .5s ease;
  opacity: 0;
  z-index: -1;
}

.page_item_has_children:hover .children {
  transform: translate(0);
  opacity: 1;
}

.children {
  position: absolute;
  transform: translateY(-100%);
}

<ul class="site-nav">
  <li class="page_item page-item-15"><a href="http://localhost:8888/myWebsite/">Home</a></li>
  <li class="page_item page-item-22 page_item_has_children"><a href="http://localhost:8888/myWebsite/About/">About</a>
    <ul class='children'>
      <li class="page_item page-item-81"><a href="http://localhost:8888/myWebsite/About/Me">Me</a></li>
      <li class="page_item page-item-83"><a href="http://localhost:8888/myWebsite/About/Us">Us</a></li>
    </ul>
  </li>
</ul>

CSS平滑下拉菜单

1 个答案: