CSS转换不起作用

Question

我试图让导航栏中的子菜单出现转换。但是这不起作用。我正在使用的CSS代码是这样的 -

#navigation li ul { 
    display: none; 
    width: auto; 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    background-color: #F87217; 
    -webkit-transition: 0.7s; 
    -moz-transition: 0.7s; 
    -o-transition: 0.7s; 
    transition: 0.7s; 
} 

#navigation li:hover ul { 
    display: block; 
} 

我该如何获得过渡工作？

Answer 1

您无法转换display。尝试转变height或opacity代替：

#navigation li ul { 
    display: block; 
    width: auto; 
    height: 0; 
    opacity: 0; /* optional */ 
    /* other attributes */ 
    -webkit-transition: 0.7s; 
    -moz-transition: 0.7s; 
    -o-transition: 0.7s; 
    transition: 0.7s; 
} 

#navigation li:hover ul { 
    height: auto; 
    opacity: 1; /* optional */ 
} 

Answer 2

当您使用显示器没有，该项目不渲染...那么你将永远无法盘旋它。使用高度为Jan Dvorak表示可能是更好的选择。但是高度为0的物品也不能被徘徊。

我建议使用透明度。

#navigation li ul { 
opacity: 0; 
... 
} 
#navigation li:hover ul { 
    opacity: 1; 
}