Question

我正在构建一个纯文本菜单（客户端要求），因为他们的一些客户端需要在没有打开JS的情况下进行导航。该菜单适用于所有预期目的，但我想＆＃34;美化＆＃34;稍微通过添加CSS3过渡到菜单下拉悬停的方式，并在第3级（也在悬停）上向右飞行。

我的尝试是将以下内容应用于将采取行动的<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来显示/隐藏菜单+子菜单。这不是，因为它们就像一个布尔值：开启或关闭 - 即没有＆＃39;中间＆＃ 39;值得你选择。

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

所以，基础是：

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

<强>演示

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

弹出demo - IMO看起来不像褪色

这通过将宽度正常设置为0，然后在悬停上更改此值来实现。过渡的使用允许动画。

PURE CSS3在没有animate.css的情况下向上，向下，向左，向右滑动

1 个答案: