css - 过渡在 css 中不起作用

Question

我正在创建一个下拉菜单。到目前为止一切正常。一件不起作用的事情是出现下拉菜单时不透明度的变化。我还想添加一个高度流。我的意思是整个高度应该会在 0.5 秒后自行升高。

现在我认为我可以通过过渡实现这些目标，但不知何故它根本不起作用。

#nav-primary ul ul{
    position:absolute; 
    left:0px;
    opacity: 0;
    transition:opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    z-index:497;
}

#nav-primary ul li:hover > ul { 
    opacity: 1; 
    position:absolute; 
    top:100%; 
    left:0; 
 }

基本上我使用的是来自 wordpress 的 wp_nav_menu:

wp_nav_menu( array( 'theme_location' => 'menu', 
                    'link_before' => '<span>',
                    'link_after' => '</span>',) );

结构应该如下:

ul ...                         // main-menu
    li ...
        ul ...                 // sub-menu
            li ...
                <a>
                <span>
                </a>

Answer 1

在您的 CSS 代码中，您永远不会对最顶层的父元素 ul 应用任何定位。也许这是一个错字？

你的第一行是:

#nav-primary ul ul{

但也许你的意思是:

#nav-primary ul {

您最好的第一步是设置您的父 ul。如果您的父级 ul 和 li 没有定位属性，您的子级 li 将不知道他们在定位什么。

假设您有其他一些默认样式，那么您只需要这样的东西:

#nav-primary ul {
    position:relative; 
}

将其与您已有的一些样式以及其他一些基本样式相结合，您就可以开始了:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: block;
    width: 300px;
    height: 30px;
    line-height: 30px;
    color: black;
    padding: 5px;
    background: #aaa;
}

ul li li {
    background: #ccc;
}

#nav-primary ul {
    position:relative;
}

#nav-primary ul > li > ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    transition:opacity .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    opacity: 0;
}

#nav-primary ul > li:hover > ul { 
    opacity: 1; 
}

在此处查看实际效果:http://jsfiddle.net/jonthomas/27Ymw/1/

希望对您有所帮助!