Made a drop down menu. How can I get the drop down to fade in and out?!

programming web dev
1

Hi guys!

I’ve created a drop down menu (with the help of you legends on here! :wink: )…Now I just need it to animate so when the user hovers over the main menu item, the drop down fades in.

Here’s the HTML I have…



    <ul id="nav">
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a>
            <ul>
                <li><a href="#">&raquo; Sub Menu 1</a></li>
                <li><a href="#">&raquo; Sub Menu 2</a></li>
                <li><a href="#">&raquo; Sub Menu 3</a></li>
                <li><a href="#">&raquo; Sub Menu 4</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 5</a></li>
        <li><a href="#">Nav 6</a></li>
    </ul>

…and here’s my CSS…



ul#nav {width:920px; height:35px; list-style:none; padding:0; margin:0; background:url(navBg.jpg) repeat-x; z-index:999;}
ul#nav li a:hover, #nav li a:active {background:url(navOn.jpg) repeat-x; text-decoration:none;}
ul#nav li a {color:#E0E2E7; display:inline-block; float:left; margin:0; padding:10px 19px; width:auto; text-decoration:none;}

* html #nav li {display:inline; float:left; }  /* for IE 6 */
* + html #nav li {display:inline; float:left; }  /* for IE 7 */

#nav ul {width:208px; left:-9999em; list-style:none; margin:35px 0; padding:0; position:absolute; z-index:999;}
#nav li:hover ul {left:auto;}

#nav li {float:left;}
#nav li li a {width:190px; background-color:#efefef; color:#2e2e2e; padding:8px; margin:0; }
#nav li li a:hover {background-color:#000; background-image:none; color:#FFF;}

#nav li:hover {background:url(assets/images/frame/navOn.jpg);}

From what I can make out, I assume I need either Javascript or JQuery…

Does anyone know how I can get the drop down to fade in and out?

Thank you very much and I hope to hear from you.

SM