jQuery offset left doesn't work correctly

[discofo2]

When the page is loaded at first time, offset returns an incorrect value. If I refresh page some times, offset returns the correct value.javascript\[code\] $(window).bind('load', function(){ var submenu = $("div#menu_principal div.content_menu ul.principal li.item div.submenu"); var countSubmenu = submenu.length-1; submenuReady = false; for(i=0; i<=countSubmenu; i++){ var element = $("div#menu_principal div.content_menu ul.principal li.item div.submenu").eq(i); var paddingSubmenu = parseInt(element.css('paddingLeft'), 10)+parseInt(element.css('paddingRight'), 10); var widthAnchor = parseInt(element.parent().outerWidth()); var widthSubmenu = parseInt(element.outerWidth(), 10); if(widthAnchor >= widthSubmenu){ var newWidth = widthAnchor-paddingSubmenu; element.css('width', newWidth+'px'); } var widthSubmenu = parseInt(element.outerWidth(), 10); var offsetContentMenu = parseInt($('div.content_menu').offset().left, 10); var widthContentMenu = parseInt($('div.content_menu').css('width'), 10); var offsetItemAtual = parseInt(element.parent().offset().left, 10); if(widthSubmenu > widthContentMenu){ var newLeft = -(offsetItemAtual-offsetContentMenu); var newWidth = widthContentMenu-paddingSubmenu; element.css('width', newWidth+'px'); element.css('left', newLeft+'px'); element.css('overflow', 'hidden'); element.find('div.include').css('width', newWidth+'px'); element.find('div.include').css('overflow-x', 'scroll'); } element.text(element.offset().left); var widthSubmenu = parseInt(element.outerWidth(), 10); var offsetRightSubmenu = element.offset().left+widthSubmenu; var offsetRightContent = offsetContentMenu+widthContentMenu; if(offsetRightContent < offsetRightSubmenu){ var newOffsetSubmenu = (offsetContentMenu+widthContentMenu)-widthSubmenu; var offsetItemAtual = parseInt(element.parent().offset().left, 10); var newLeft = -(offsetItemAtual-newOffsetSubmenu); element.css('left', newLeft+'px'); } element.hide(); if(i == countSubmenu){ submenuReady = true; $("div#menu_principal div.content_menu ul.principal").css('overflow', 'visible'); } }});\[/code\]html\[code\]<div id="menu_principal"> <div class="content_menu"> <ul class="principal"> <li class="item"><a href="http://stackoverflow.com/questions/15540278/#" class="item">Agenda</a><div class="submenu"><div class="include">test</div></div></li> <li class="item"><a href="http://stackoverflow.com/questions/15540278/#" class="item">Turismo, cultura e lazer</a><div class="submenu">test</div></li> <li class="item"><a href="http://stackoverflow.com/questions/15540278/#" class="item">Cinema</a><div class="submenu">test</div></li> <li class="item"><a href="http://stackoverflow.com/questions/15540278/#" class="item">Fa?a sua festa</a><div class="submenu">test</div></li> <li class="item"><a href="http://stackoverflow.com/questions/15540278/#" class="item">Not