Check it out HTML <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul>
CSS ul{ display:block; overflow:hidden; padding:0px; margin:0px; } ul li{ list-style-type:none; float:left; background-color:#666; margin-right:10px; position:relative; top:0px; padding:5px 10px; } JAVASCRIPT var menu_node = null; var menu_lenght = $("ul").children().length; var menu_elements = $("ul").children(); var total_widths = 0; var speed = 1000; for(i=0;i<menu_lenght;i++){ menu_node = menu_elements[i]; total_widths += $(menu_node).outerWidth(); total_widths += parseInt($(menu_node).css("margin-left"),10); total_widths += parseInt($(menu_node).css("margin-right"),10); $(menu_node).css({"left":"-"+total_widths+"px"}); } for(i=0;i<menu_lenght;i++){ menu_node = menu_elements[i]; $(menu_node).animate({left:"0px"},speed); } ERROR IN IE7 and IE8 :'( Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Mon, 23 Nov 2009 17:00:24 UTC Message: Invalid argument. Line: 12 Char: 12949 Code: 0 URI: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ERROR LINE: $(menu_node).css({"left":"-"+total_widths+"px"}); Tracing with the developer tool of IE8 i found http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js or either other jquery 1.3.2 1661: elem[ name ] = value; Any suggestion? Thanks....