I have a nav menu with a subnav. The subnav should show when the parent li is hovered upon, but I'm not getting the expected results...

html

```
<div class="nav <%= cssClass %>">
    <ul>    
        <li><a runat="server" href="http://www.synergisticsinstitute.com/">Welcome</a></li>
        <li>
            <a runat="server" href="http://www.synergisticsinstitute.com/bhot-for-men/">BHOT&trade; For Men</a>
            <div class="subnav" style="display:none;">
                <a href="http://www.synergisticsinstitute.com/bhot-for-men/research/">BHOT&trade; Research</a>
                <a href="http://www.synergisticsinstitute.com/bhot-for-men/faq/">FAQ for Men</a>
            </div>
        </li>
        <li>
            <a runat="server" class="bhot-for-women" href="http://www.synergisticsinstitute.com/bhot-for-women/">BHOT&trade; For Women</a>
            <div class="subnav" style="display:none;">
                <a href="http://www.synergisticsinstitute.com/bhot-for-women/faq/">FAQ for Women</a>
            </div>
        </li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/hcg-weight-loss/">hCG Weight Loss</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/nutrition/">Nutrition</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/supplements/">Supplements</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/medical-director/">Meet Our Medical Director</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/contact-us/">Contact Us</a></li>
    </ul>
</div>

```

jquery

```
$(document).ready(function () {
    var $nav = $('.nav');
    $nav.find('div.subnav').each(function () {
        $(this).parent().hover(navMouseIn(this), navMouseOut(this));
    });
});

function navMouseIn(elem) {
    $(elem).show();
}

function navMouseOut(elem) {
    $(elem).hide();
}

```