纯css菜单，过渡不起作用

Question

我试图创建纯粹的css驱动菜单，一旦用户将鼠标悬停在菜单项上，我希望子菜单从一侧滑出。我试图使用过渡，但这似乎没有什么区别。

http://codepen.io/anon/pen/qyIHg

如果有人可以看看，我会很感激。

谢谢

Answer 1

Demo Fiddle

通过一些解释，当您希望应用转换时，您需要从display移除元素上的none/block/inline-block，否则转换将不会按预期应用，因为它不是一个可计算的滑动值（过渡将从显示任何东西变为立即显示某些东西）。

将您的CSS更改为（需要进行一些调整）：

html, body {
    font-family:Calibri;
    background:#3d3d3d;
}
#test {
    display: block;
    width:80px;
    height:200px;
    background:lightsalmon;
}
#test a {
    display:block;
    width:80px;
    height:20px;
    color:#111111;
    text-decoration:none;
}
#test ul {
    list-style-type:none;
    padding:0px;
}
#test ul li {
    height:20px;
    width:80px;
}
#test ul li ul {
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    /* ...and the transition property */
    transition: .3s;
    transition:width .8s ease;
    overflow:hidden;
    width:0px;
    top:-20px;
    background:lightsalmon;
    position:relative;
    right:0;
    opacity:0;
}
#test ul li:hover {
    background:lightcoral;
}
#test ul li:hover ul {
    width:80px;
    left:80px;
    opacity:1;
}