html - 我应该在我的菜单中的什么地方添加过渡效果？

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

首先从 Accordion 中删除 display:none。然后指定 Accordion li 元素的高度以及过渡类型。 在 About us li 的 :hover 状态下，您指定 Accordion li 的新高度。 DEMO