PURE CSS3 向上、向下、向左、向右滑动，没有 animate.css

Question

我正在构建一个纯文本菜单（客户要求），因为他们的一些客户需要在不打开 JS 的情况下进行导航。该菜单适用于所有预期目的，但我想通过添加 CSS3 过渡到悬停时菜单下拉菜单的方式和在第 3 层（悬停时）向右飞出的方式来 "beautify" 它一点点。

我的尝试是将以下内容应用于 <ul> 将采取行动

.mymenu ul li:hover ul {
   opacity: 1;
   height: auto;
   overflow: visible;
   width: auto;  
   min-width: 190px;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
   }

那没有任何作用（否则我不会在这里，现在是吗？哈哈）

基本上，我希望有人能为我解决这个问题，如果可能的话解释一下。不要急于快速回答而错过问题已回答的复选标记。我会检查它肯定:)

我需要一个动画下拉效果，但需要一个非动画关闭的下拉菜单，以便它可以跟上用户的速度。和第3级子菜单左右相同的效果

我已经为你创建了一个CODEPEN。

如果你想更好地了解我在寻找什么，你可以查看 LinkedIn 菜单，你也会在那里看到下拉效果。

非常感谢！

Answer 1

您的问题是您正在使用 display 到 show/hide 您的菜单 + 子菜单。这不起作用因为它们就像一个布尔值： 开或关 - 即没有 'intermediate' 值供你选择。

那么，可能的解决方案是什么？好吧，我已经替换了您对 display: 的使用，并将其更改为 opacity:，具有中间值，因此可以过渡得很好。

所以，基础知识是：

将display: none替换为opacity:0
将display: inline替换为opacity:1

演示

.mymenu {
  background: #0067A5;
  box-shadow: 0px 4px 17px #000;
  border-top: 1px solid #666;
  height: 35px;
  position: fixed;
  top: 55px;
  width: 100%;
  z-index: 99;
  background: #0067A5;
  box-shadow: 0px 4px 17px #000;
  border-top: 1px solid #666;
  width: 570px;
  margin-left: 425px;
}
ul {
  list-style-type: none;
  padding-left: 0px;
  margin-top: 0;
  margin-bottom: 10px;
}
a {
  text-decoration: none;
}
ul li {
  position: relative;
  display: block;
  padding-bottom: 2px;
  margin: 0 -5px;
}
li.retrodropdown {
  height: 50px;
}
.mymenu ul li a {
  position: relative;
  display: inline-block;
  padding: 0px 18px 0px 8px;
  font-weight: 700;
  margin-top: 6px;
  text-transform: uppercase;
  font-family: open sans !important;
  font-size: 13px;
  color: #333;
  border-left: 1px solid #fff;
}
.mymenu .retrodropdown-menu {
  padding-bottom: 15px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding-top: 15px;
  top: 32px;
  left: 4px;
}
.retrodropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  opacity: 0;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.retrodropdown:hover .retrodropdown-menu {
  opacity: 1;
}
.retrodropdown-menu li {
  width: 100%;
  padding-bottom: 0;
  border-bottom: 1px solid #E0871A;
}
.mymenu ul li ul li {
  margin: 0;
  height: 30px;
  display: inline-block;
}
.mymenu ul li {
  position: relative;
  display: block;
  float: left;
  padding-bottom: 2px;
  margin: 0 -5px;
  z-index: 999;
}
.mymenu ul li:first-child a {
  border-left: none;
}
.mymenu li:last-child {
  border-bottom: none;
}
.mymenu ul li ul li ul {
  opacity: 0;
  left: 192px;
  position: relative;
  top: -25px;
  background: #fff;
  width: 155px;
  height: 150px;
  border: 1px solid #ccc;
}
.retrodropdown-menu li:not(.header):hover,
.jg-header-navigation .retrodropdown-menu > li > a:hover {
  background-color: #0067A5;
}
.mymenu ul li ul li:hover ul {
  opacity: 1;
}
.mymenu ul li ul {
  width: auto;
  min-width: 190px;
}
.mymenu ul li:hover ul {
  opacity: 0;
  height: auto;
  overflow: visible;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

<div class="mymenu">
  <ul>
    <li class="retrodropdown" aria-haspopup="true">
      <a id="RetroHeader_HyperLink7">Career Services</a>
      <ul class="retrodropdown-menu">
        <li><a href="#">Education</a>
        </li>
        <li><a href="#">Resume Help</a>
        </li>
        <li><a href="#">Promote Yourself</a>
        </li>
        <li class="flyout-menu"><a href="#">Career Tools</a>
          <ul class="fadeInLeft animated">
            <li><a href="#">Skills Assessment</a>
            </li>
            <li><a href="#">Career Videos</a>
            </li>
            <li><a href="#">Career Exploration</a>
            </li>
            <li><a href="#">Interview Training</a>
            </li>
            <li><a href="#">Military Translator</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</div>

Flyout demo - IMO 不如 fade 好看

通常将宽度设置为 0，然后在悬停时更改它。过渡的使用允许它被动画化。

PURE CSS3 向上、向下、向左、向右滑动，没有 animate.css

PURE CSS3 slide up, down, left, right transitions without animate.css

css

css-transitions

css-animations