Detect li hover and slide down child ul

Question

I have this HTML, where .subul is hidden with display: none :

<li class="par cat-item cat-item-2">
    <a href="category/environment">
        <span class="category-text">Environment</span>
        <span class="count"><span class="count-hidden">9</span></span>
    </a>
    <ul class="subul">                                
        <li class="cat-item cat-item-40">
            <a href="category/environment/test">
                <span class="category-text">test</span>
                <span class="count">
                    <span class="count-hidden">1</span>
                </span>
            </a>
        </li>
    </ul>                        
</li>

I want when li.par is hovered to slide down its child ul (if it has it), however I can't even seem to get it to just trigger on hover. Here's what I tried:

$('body').on('mouseenter', 'li.par', function() {
    if ($(this).children("ul").length) {
        alert('code');
    }

    $(this).children("ul").slideDown();
    alert('code');
});

EDIT css

ul.subul {
    display: none;
}

Answer 1

Try this:

$('li.par').hover(function(){
    $(this).children('ul.subul').slideDown();
},function(){
    $(this).children('ul.subul').slideUp();
});

Answer 2

Please Use This :

 $('body').on('mouseenter', 'li.par', function() { $(this).find("ul").slideDown(); }); $('body').on('mouseleave', 'li.par', function() { $(this).find("ul").slideUp(); }); 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script> <ul> <li class="par cat-item cat-item-2"> <a href="category/environment"> <span class="category-text">Environment</span> <span class="count"><span class="count-hidden">9</span></span> </a> <ul class="subul" style="display:none"> <li class="cat-item cat-item-40"> <a href="category/environment/test"> <span class="category-text">test</span> <span class="count"><span class="count-hidden">1</span></span> </a> </li> </ul> </li> <li class="par cat-item cat-item-2"> <a href="category/environment"> <span class="category-text">Environment</span> <span class="count"><span class="count-hidden">10</span></span> </a> </li> </ul>