Where would I add a transition effect in my menu? - html

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>
About Us <img style="border:0;" src="/index_files/darrow.png" />
<ul id="accordion">
<li>Who We Are</li>
<li>Contact Us</li>
<li>Join Us For Worship</li>
<li>Meet Our Staff</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.