Question

我已经实现了一个带有CSS3的下拉菜单，当父li悬停时，它会很好地淡入下拉菜单。但下拉不会淡出，这就是原因。由于无法转换显示属性，因此通过转换不透明度来实现淡入淡出。由于只是不透明度被转换，您需要将子ul移开 - 否则隐藏的子菜单将在悬停时出现。

我创建了一个JS小提琴来演示这一点 - 如果left:1000px;没有ul#mainNav li ul规则，它就会很好地淡出。但是你可以将鼠标悬停在隐形菜单上。 - http://jsfiddle.net/YZvdm/

那么我怎样才能让它淡出而不会让它不小心可以躲避？ height:0;也将消除淡出，因此这不是一种选择。

Answer 1

开展这项工作的关键是使用visibility:hidden代替display:none，并在transition-delay转为0之前使用opacity。

.nav li ul {
  visibility: hidden;
  opacity: 0;
  -prefixes-transition-property: opacity, visibility;
  -prefixes-transition-duration: .4s, 0s;
  -prefixes-transition-delay: 0s, .4s;
}

.nav li:hover ul {
  visibility: visible;
  opacity: 1;
  -prefixes-transition-delay: 0s, 0s;
}

小提琴：http://jsfiddle.net/YZvdm/29/

Answer 2

这是一个带有淡入和淡出的全CSS下拉列表的Github。它应该能够做你用Javascript做的一切。

http://github.com/jmeas/CSS3-Dropdown-With-Fade

Answer 3

对于我来说，简单地实现jQuery淡入和淡出是一个更好的解决方案，如下所示：

$(function() {

    $('#topNav ul').find('ul').show().hide();
    $('#topNav > ul > li').hover(function() {
        $(this).children('ul').stop().fadeIn(300);
    }, function() {
        $(this).children('ul').stop().fadeOut('fast');
    });

}

Answer 4

我实际上没有对此进行过测试，但您应该可以通过定义自己特殊的“延迟”动画并将其应用到子菜单来解决这个问题。

#mainNav > li > ul {  
    -moz-animation-duration: 3s;  
    -moz-animation-name: delaySlide;     
}  

@-moz-keyframes delaySlide {  
    from {  
      height: auto;  
    }  

    95% {  
       height: auto;
    }  
    to {  
      height: 0;  
    }     
}

这样做，并正确计时，应该在淡出后使菜单的高度动画发生。

取消https://developer.mozilla.org/en/CSS/CSS_animations#Defining_the_animation_sequence_using_keyframes
的示例代码

Answer 5

我在Codepen上创建了一个演示，可以在Firefox或其他人上使用：

http://codepen.io/hayatbiralem/pen/Gdfie

希望这有帮助。

Screenshot

Answer 6

我参加这个派对的时间已经很晚了，但我最终面对的是类似的前景：

小提琴： https://jsbin.com/bibokaqumi/1/edit?html,css,output

标记：

<nav>
  <ul>
    <li>Link One</li>
    <li class="sub">Link Two
      <ul>
        <li>Sub-Link One</li>
        <li>Sub-Link Two</li>
      </ul>
    </li>
    <li>Link Three</li>
  </ul>
</nav>

CSS3：

nav li {
    list-style: none;
}

nav > ul > li {
    height: 100px;
    padding-right: 50px;
    float: left;
}

    nav > ul > li.sub {
        position: relative;
    }

        nav > ul > li.sub ul {
            position: absolute;
            top: 20px;
            width: 200px;
            visibility: hidden;
        }

        nav > ul > li.sub ul {
            opacity: 0;
            transition-property: opacity;
            transition-duration: 0.3s;
        }

        nav > ul > li.sub:hover ul {
            opacity: 1;
            transition-delay: 0.1s;
            visibility: visible;
        }

CSS3下拉菜单可以淡入和淡出吗？

6 个答案: