html中使用过渡不显示,CSS3过渡不适用于显示属性

每当将鼠标悬停在其父元素上时，我一直试图使用css来显示Hidden Div淡入。

到目前为止，我所能做的就是让隐藏的div显示出来，但是到目前为止，还没有轻松的过渡。

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

这是我的代码：

HTML：

This is a Button

This is the Hidden 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;

border-top: 1px solid #EEEEEE;

border-left: 1px solid #EEEEEE;

border-right: 1px solid #EEEEEE;

border-bottom: 1px solid #EEEEEE;

-webkit-border-radius: 0px 7px 7px 7px;

-moz-border-radius: 0px 7px 7px 7px;

-khtml-border-radius: 0px 7px 7px 7px;

border-radius: 0px 7px 7px 7px;

-webkit-box-shadow: 0px 2px 2px #DDDDDD;

-moz-box-shadow: 0px 2px 2px #DDDDDD;

box-shadow: 0px 2px 2px #DDDDDD;

background: #FFF;

}

关于我在做什么错的任何线索吗？当我将鼠标悬停在按钮上时，只是试图为隐藏的内容获得平滑的效果。提前致谢！