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

**URL:** https://forum.kirupa.com/t/made-a-drop-down-menu-how-can-i-get-the-drop-down-to-fade-in-and-out/330036
**Category:** web dev
**Created:** [November 21, 2012, 4:18pm UTC](https://forum.kirupa.com/t/made-a-drop-down-menu-how-can-i-get-the-drop-down-to-fade-in-and-out/330036 "2012-11-21T16:18:11Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![spindrift](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spindrift](https://forum.kirupa.com/u/spindrift)
#### Post date: [November 21, 2012, 4:18pm UTC](https://forum.kirupa.com/t/made-a-drop-down-menu-how-can-i-get-the-drop-down-to-fade-in-and-out/330036/1 "2012-11-21T16:18:11Z")

</div>

Hi guys!

I’ve created a drop down menu (with the help of you legends on here! 😉 )…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…

```auto

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

```auto

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