html - 纯 css 菜单，过渡不起作用

Question

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

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

如果有人能看一看，我将不胜感激。

谢谢

Answer 1

Demo Fiddle

通过一些解释，当您希望应用过渡时，您需要从 none/block/inline-block 中删除元素上的 display 设置，或者转换不会像您预期的那样应用，因为它不是可计算的滑动值(转换只会从不显示任何内容到立即显示某些内容)。

将您的 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;
}