jquery ddl menus

HTML

<div id="navigation" style="width: 450px; margin: 0 auto;">
    <ul class="top-level">
        <li id="SHOP0"> <a href="#" id="SHOP">SHOP</a>

            <ul id="test" class="sub-level">
                <li><a href="#" id="PILLOW"><span id="cool1">PILLOW</span></a>

                </li>
                <li><a href="#" id="EARRINGS"><span id="cool9">EARRINGS</span></a>

                </li>
                <li><a href="#" id="BRIDAL"><span id="cool10">BRIDAL</span></a>

                </li>
                <li><a href="#" id="ALCHEMY"><span id="cool11">ALCHEMY</span></a>

                </li>
            </ul>
        </li>
        <li> <a href="#">WHERE TO FIND US</a>

        </li>
        <li> <a href="#">STYLE GALLERY</a>

        </li>
        <li> <a href="#">ABOUT</a>

        </li>
    </ul>
</div>

CSS

body {
    background-color: #333;
}
* {
    padding: 0;
    margin: 0;
}
ul li {
    list-style: none;
}
a img {
    border: none;
}
*:focus {
    outline: none;
}
a {
    text-decoration: none;
    color: #fff;
}
#navigation li a {
    font-size: 45px;
}
ul#test li a {
    font-size: 24px;
}
li#SHOP0 ul#test {
    display: none;
}
#SHOP:hover ul {
    display: block;
}

JavaScript

$(".top-level li").hover(function () {
    $("ul#test", this).fadeIn();
}, function () {
        $("ul#test", this).delay(500).fadeOut();
});