jQuery hide-show

Jeg har en megadrop, der skal komme frem når jeg kører musen hen over menu punktet.

Dette er min JS kode:

$(document).ready(function(){

    $("#mainNavigation .toplevel").hover(function() {
        $(this).next(".mainNavMegadrop").animate({opacity: "show"}, 1);
    }, function() {
        $(this).next(".mainNavMegadrop").animate({opacity: "hide"}, 1);
    });

});


Og dette er min html kode:

<ul id="mainNavigation">
    <li class="toplevel">
        <div class="mainNavMegadrop"></div>
        <a href="/navitem2.aspx" title="Products" style="cursor:default;"></a>
    </li>
</ul>

Skal man bruge en <a> til at tage imod :hover'en ?