0

我正在创建一个下拉菜单。到目前为止一切正常。不起作用的一件事是下拉菜单出现时不透明度的变化。我还想添加一个高度流。我的意思是整个高度应该会在 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>
4

1 回答 1

0

在您的 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/

希望有帮助！

于 2013-02-02T06:47:42.483 回答