Javascript 孩子UL对李爸爸的奇怪行为'；s动画

嗨！看最后一份菜单（在底部）。当您将鼠标悬停在一个带有“+”符号的LIs上，该LIs具有子菜单UL，滑块切换显示子UL，但当动画完成时，它会更改宽度

我可以在chrome上看得更清楚

有什么问题吗

代码如下：

HTML

JAVASCRIPT

$(function(){

            $("li.father").hover(
                function(){
                    $(this).find("ul").stop().slideToggle(400);
                },
                function(){
                    $(this).find("ul").stop().slideToggle(400);
                }
            );

            $("ul.extend li").not(".father").hover(
                function(){
                    $(this).animate({width:"170"}, {duration:200, queue:false});
                },
                function(){
                    $(this).animate({width: "150"}, {duration:500, easing: "easeOutBounce", queue:false});
                }
            );

            $("ul.color li").hover(
                function(){
                    $(this).animate({backgroundColor: "#333"}, {duration:100, queue:false});
                },
                function(){
                    $(this).animate({backgroundColor: "#EEE"}, {duration:100, queue:false});
                }
            );
        });​

---

发生这种情况是因为您指定了

li.father { padding: 5px 10px 0 0; }

所以，嵌套的ul也有这个填充。只需删除正确的填充，并将

li.father的大小增加10个像素，如下所示

li.father { padding: 5px 0 0 0; width: 160px; }

参见
请在问题中加入相关代码！一个演示作为增强是很好的，但它本身还不够（如果JSFIDLE因为某种原因关闭了怎么办？）哦，太好了！但为什么它只在滑动切换结束时才得到填充？这是slideToggle的默认行为吗？我不能确切地说出slideToggle的行为，但可能在动画结束时显示属性发生了更改（或某些填充折叠）
li.father { padding: 5px 10px 0 0; }

li.father { padding: 5px 0 0 0; width: 160px; }