Where would I add a transition effect in my menu?

Question

I wish to add a transition to my current CSS dropdown menu.

I have my "transition: height ease-in-out 500ms;" code all ready to go, I just need to know where to add it.

How I have my menu setup is like so:

<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>

So, what I am wondering is where I would put my transition code in my .css file to affect the "accordion" section. (I can remove the id="accordion" section, that was just there from testing.

All help is appreciated, thank you.

EDIT: Here is the 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

Start by deleting the display:none from to the accordion. Then specify a height to the accordion li elements as well as a transition type. in the :hover state of the About us li, you specify the new height for the accordion li's. DEMO

Answer 2

You add that directive on the same rule where the height of the menu changes (not the :hover state).

You'll have to provide us with more details if you want a more detailed answer.