Анимированное меню с jquery

Question

У меня есть меню, которое я хочу анимировать с помощью jquery: это меню HTML:

<ul class="shopp_categories">
<li><a href="">Link1</a>
    <ul class="children">
        <li><a href="#">Sublink1</a>
            <ul class="children">
                <li><a href="#">Sublink2</a></li>
            </ul>
        </li>
    </ul>
</li>

А это мой JS:

$(".shopp_categories li").mouseover(function() {
        jQuery(this).children().show()
});

$(".shopp_categories li").mouseout(function() {
        jQuery(this).children().hide()
});

Меню не анимировано правильно. Где ошибка? Я хотел бы использовать свою собственную функцию. я знаю, что для этого доступно множество плагинов, но я предпочитаю несколько строк кода, а не целый плагин.

Это меню css:

.shopp_categories{padding:0; margin:0 0 15px 0;overflow:hidden; list-style:none}
.shopp_categories li ul{padding:0; margin:0; list-style:none; display:none}
.shopp_categories li{padding-left:7px;overflow:hidden; position:relative}

Answer 1

Попробуйте это:

$(".shopp_categories li").mouseover(function() {
        $(this).children().show()
    });

    $(".shopp_categories li").mouseout(function() {
            $(this).children('ul').hide()
});

Answer 2

$ ('. Shopp_categories li'). Hover (function () {$ (this) .children ('. Children'). Show ();}, function () {$ (this) .children ('. детская '). hide ();});