使用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（'。 children'）。hide（）;}）;