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

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文件影响到“手风琴”一节。 （我可以删除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

首先从手风琴中删除display:none。然后指定手风琴元素的高度以及过渡类型。 在关于我们li的悬停状态中，您指定了手风琴li的新高度。 DEMO

Answer 2

您在添加指令同样的规则，其中高度的菜单变化（不是:hover状态）。

你必须，如果你想更详细的解答，为我们提供更多的细节。