0

http://jsfiddle.net/RedKnight91/Z6Ueu/4/

你好！查看最后一个菜单（在底部）。当您将鼠标悬停在具有“+”符号的 LI 上时，该 LI 有一个子 UL，它是一个子菜单，slideToggle 会显示子 UL，但是当动画结束时，它会改变宽度。

我可以在 chrome 上更好地看到它。

问题可能是什么？

这是代码：

HTML

<ul class="vertical extend color">
        <li class="father">Uova
            <ul>
                <li>Fresche</li>
                <li>Di terra</li>
                <li>Artificiali</li>
            </ul>
        </li>
        <li>burro</li>
        <li class="father">zuppa
            <ul>
                <li>di legumi</li>
                <li>di ceci</li>
                <li>di fagioli</li>
                <li>fredda</li>
                <li>calda</li>
            </ul>
        </li>
        <li>limone</li>
        <li>Acqua</li>
    </ul>

CSS

ul{ padding:0; margin: 0; list-style-type: none; font-family: sans-serif; font-weight:bold; }

        li{ background: #EEE; box-shadow: 0 1px 10px #777; padding:5px; margin:0; width:150px; cursor: pointer; text-align: center; text-shadow: 1px 2px 0 white; position: relative; }
        li:hover{ background-color:#333; color:white; text-shadow: 1px 2px 0 black; }

        ul.horizontal{ display: inline; }
        ul.horizontal li { display:inline-block; zoom: 1; *display:inline; }

        ul.vertical li { margin:1px; }

        ul.extend > li:hover { background-color: #EEE; }

        li.father { padding: 5px 10px 0 0; }
        li.father ul { margin-left: -1px; display: none; padding: 0; }
        li.father:hover li { background-color:#EEE; color: #AAA; text-shadow: 1px 2px 0 white; }
        li.father:before { content: "+"; color: #555;}
        li.father:hover:before { content: "-"; color: #FFF;}​

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});
                }
            );
        });​
4

1 回答 1

0

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

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

因此，嵌套的 ul 也具有该填充。只需删除正确的填充并将大小增加 li.father10 像素，就像这样

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

见http://jsfiddle.net/Z6Ueu/9/

于 2012-05-09T10:19:18.393 回答