http://jsfiddle.net/RedKnight91/Z6Ueu/4/
Hey there! Take a look at the last menu (at the bottom). When you hover over one of the LIs with the "+" symbol that have children UL, which is a submenu, the slideToggle displays the child UL, but after the animation finishes, it changes width.
This issue seems more prominent in Chrome.
Any ideas on what might be causing this problem?
Here is the code snippet:
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});
}
);
});