PURE CSS3上、下、左、右滑动过渡，不带动画.css

Question

我正在构建一个纯文本菜单（客户端要求），因为他们的一些客户端需要在没有打开JS的情况下导航。该菜单适用于所有预期目的，但我想通过添加CSS3过渡来"美化"它，使菜单在悬停时下拉，并在第三级（也在悬停时）向右弹出。

我的尝试是将以下内容应用于将采取行动的<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;
   }

这没有任何作用（或者我现在不会在这里了，是吗？哈哈）

本质上，我希望有人帮我解决这个问题，如果可能的话，解释一下。不要急于快速回答，以免错过已回答问题的复选标记。我会检查一下：）

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

我为您创建了一个CODEPEN。

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

谢谢大家！

Answer 1

您的问题是使用display来显示/隐藏菜单+子菜单。这不起作用，因为它们就像一个布尔值：打开或关闭，即没有"中间"值供您选择。

---

那么，有什么可能的解决方案呢？好吧，我已经替换了您对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>

---

弹出演示-IMO不如褪色好看

这是通过将宽度正常设置为0，然后在悬停时更改宽度来实现的。转换的使用允许对此进行动画化。