相关疑难解决方法(0)

我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS-only下拉菜单,但包含不同类型的内容.

目前,似乎CSS3过渡不适用于"display"属性,即你不能做任何类型的过渡display: none到display: block(或任意组合).

当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以"淡入"？

我知道你可以在visibility:属性上使用转换,但我想不出有效利用它的方法.

我也尝试过使用身高,但这只是失败了.

我也知道使用JavaScript实现这一点是微不足道的,但是我想挑战自己只使用CSS而且我认为我有点短.

所有和任何建议最受欢迎.

每当我悬停其父元素时,我一直在尝试使用css来显示隐藏的Div淡入淡出.

到目前为止,我所要做的就是让隐藏的div显示,但是没有缓和的过渡.

这是我在JSfiddle上的代码http://jsfiddle.net/9dsGP/

这是我的代码:

HTML:

<div id="header">
<div id="button">This is a Button
    <div class="content">
    This is the Hidden Div
    </div>
</div>
</div>

CSS:

#header #button {width:200px; background:#eee}

#header #button:hover > .content {display:block; opacity:1;}

#header #button .content:hover { display:block;}

#header #button .content {

-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;

    opacity:0;
    clear: both;
    display: none;

    top: -1px;
    left:-160px;
    padding: 8px;
    min-height: 150px; …