Question

我有一个导航栏，我试图让子菜单在悬停时向下滑动。

以下是我过渡的当前CSS：

.nav ul li:hover > ul {
    height:150px;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
}

但是它只能显示子菜单的背景，可以看到here

有谁知道如何解决这个问题，以便整个菜单过渡？

Answer 1

我认为您正在寻找类似的内容：JS Fiddle

我添加了overflow:hidden;并将css过渡移动到了悬停标记。

.nav ul ul {
    width: 501px;
    background: #6db6e5;
    height: 0px;
    overflow: hidden;
    padding-left:0;
    margin-left:0;
    font-size: 12px;
    text-align: center;
    -webkit-transition:all 1.0s ease-in-out;
  -moz-transition:all 1.0s ease-in-out;
  -o-transition:all 1.0s ease-in-out;
  transition:all 1.0s ease-in-out;    
}

nav转换为css

1 个答案: