Html 纯css菜单，过渡不起作用

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

如果有人能看一看，我会很感激的

谢谢

作为某种解释，当您希望应用转换时，需要从

none/block/inline block

中删除元素上的

显示设置，否则转换将不会像您预期的那样应用，因为它不是可计算的滑动值（过渡将从无显示变为立即显示）

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

也许你应该解释一下你做了什么，为什么等等……比一块
CSS
有用一点。看看这个，可能会有帮助：你不能在
display:none
和
display:block
之间转换。试着用z-index改变它，使你的子菜单位于主菜单下面，而不是转换左属性蒂德。
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;
}