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

当您使用display none时，该项目不会呈现...因此您永远无法将其悬停。使用Jan Dvorak的高度可能是更好的选择。但是高度为0的物品也不能悬停。

我建议使用透明度。

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

CSS过渡不起作用

2 个答案: