Question

我希望添加一个转换到我当前的CSS下拉菜单。

我有“过渡：高度缓入500毫秒;”代码都准备好了，我只需要知道在哪里添加它。

我的菜单设置如何：

<ul id="nav">

    <li>
        <a href="/about/index.html">About Us <img style="border:0;" src="/index_files/darrow.png" /></a>

        <ul id="accordion">

            <li><a href="/about/mission.html">Who We Are</a></li>
            <li><a href="/about/contactUs.php">Contact Us</a></li>
            <li><a href="/about/mission.html">Join Us For Worship</a></li>
            <li><a href="/about/staff.html">Meet Our Staff</a></li>

        </ul>


    </li>
</ul>

所以，我想知道的是我将转换代码放在我的.css文件中以影响“accordion”部分。（我可以删除id="accordion"部分，这就是测试中的部分。

感谢所有帮助，谢谢。

编辑：这是CSS：

#nav {

    font-size:20px;
    text-align:center;
    position:relative;
    z-index:500;
    display:block;
    margin-bottom:20px;
    padding:0;
    width:950px;
    background:#33A1DE;
    float:left;
    border-bottom:none;
    color:white;
    -moz-box-shadow: 0px 5px 10px #333333;
    -webkit-box-shadow: 0px 5px 10px #333333;
    box-shadow: 0px 5px 10px #333333;
}


#nav a:visited, #nav a {
    color:white;
}


#nav li a, #nav li {
    float:left;

}

#nav > li {
    line-height:2em;
    width:20%;
    list-style:none;
    position:relative;
    border-top:none;
    border-right:1px solid white;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#nav > li.right {
    line-height:2em;
    width:20%;
    list-style:none;
    position:relative;
    border-right:none;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#nav li a {
    height:100%;
    width:100%;
    text-decoration:none;
    background:#33A1DE; 
}

#nav li a:hover {
    background:#000000;
}

/* Submenu */

#nav li ul {
    list-style:none;
    width:100%;
    display:none;
    position:absolute;
    left:0;
    top:100%;
    padding:0; margin:0;
}

#nav li ul:last-child {
    border-bottom:1px solid white;
}


#nav li:hover > ul {
    display:block;
}


#nav li ul li, #nav li ul li a {
    float:none;
}

#nav li ul > li {
    left:-1px;
    text-align:center;
    margin:auto;
    position:relative;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    _display:inline; /* for IE6... God knows why */
}

#nav li ul li a {
    display:block;
    border:1px solid white;
    border-bottom:none;
}


/* Sub-Submenu */

#nav li ul li > ul {
    list-style:none;
    display:none;
    position:absolute;
}

#nav li ul li:hover ul {
    border-left:1px solid white;
    z-index:5;
    left:0px;
    top:0px;
    left:100%;
    width:200px;
}

#nav li ul li ul:last-child {
    border-bottom:1px solid white;
}

#nav li ul li:hover ul.youth {
    border-left:1px solid white;
    z-index:5;
    left:0px;
    top:-100%;
    left:100%;
    width:200px;
    box-sizing:border-box;
}

Answer 1

您可以在菜单高度发生变化的同一规则上添加该指令（不是:hover状态）。

如果您想要更详细的答案，则必须向我们提供更多详细信息。

Answer 2

首先从手风琴中删除display:none。然后指定手风琴li元素的高度以及过渡类型。在关于us li的：hover状态中，你指定手风琴li的新高度。 DEMO

我在哪里可以在菜单中添加过渡效果？

2 个答案: