I am using a list for the nav for the nav of my website and when a user hovers over certain list items a dropdown appears with extra navigation options. In my case when a user hovers over the Brands item then a dropwdown appears with all the different brands. At the moment the dropdown appears instantly however I'd like it to appear in a motion as if it is sliding down rather than just appearing instantly. Is this possible with CSS or do I need some jQuery magic ?? Code:

HTML:

    <section id=nav>



        <div id=nav-wrapper>



            <ul id=nav-list>



                <li id=nav-home><a href=>Home</a>

                </li>

                <li id=nav-brands><a href=>Brands</a>

                    <ul id=brands-list>

                        <li><a href=>Brand 01</a>

                        </li>

                        <li><a href=>Brand 02</a>

                        </li>

                        <li><a href=>Brand 03</a>

                        </li>

                        <li><a href=>Brand 04</a>

                        </li>

                        <li><a href=>Brand 05</a>

                        </li>

                    </ul>

                </li>

                <li id=nav-about><a href=>About Us</a>

                </li>

                <li id=nav-contact><a href=>Contact Us</a>

                </li>



            </ul>



        </div>



    </section>

CSS :

#nav-brands { position:relative; }



#nav-list li:hover ul { display: block; opacity: 1; visibility: visible; background-color: #fff; }



#brands-list { padding: 10px 0px 0px 0px; position: absolute; top: 20px; left: -35px; width: 120px; box-shadow: none; display: none; opacity: 0;

               visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s;

               -o-transition: opacity 0.2s; -transition: opacity 0.2s; border:thin solid #000000; border-radius:0px 0px 5px 5px;

               border-top:0px;

}



#brands-list li { display: block; margin:0px 0px 5px 0px; padding:0px 0px 5px 0px; text-align:center; border-bottom:thin solid #CECECE;



}



#brands-list li:hover {}



#brands-list li:last-child { border-bottom:0px; }