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/

希望有所帮助！

转换不适用于CSS

1 个答案: