wrong width calculation using outerWidth() in google chrome [onload]

Question

I have a navigation bar(topmenu) inside a div. I have to hide the rest of the menu elements if the width of the menu is greater than that of the outer div. Unfortunately I cant use overflow:hidden for the div .So I use .outerWidth() function to calculate the total width of the div and the width of each elment(li), and hide the overflow elements. So my problem is its works fine in firefox(19.0),IE(8)!, but not in chrome. In chrome all elements are hidden. The problem resolves when i change

$(document).ready(function() {}); to $(window).load(function() {});

But then, The total ul is shown for a fraction of second, then it get hidden(IE,FF it still works fine). Is there any better solution for this? Or any different logic.

Sample

<div style="width:300px;" > 
<ul id="menu1">
    <li class="noChild "><a  href="#" >3 Option</a></li>
    <li class="noChild"><a href="#" >2 Option</a></li>
    <li class="noChild "><a  href="#" >1 Option</a></li>
 </ul>
</div > 

http://jsfiddle.net/RSA3X/4/

similar case of mine

Answer 1

Actually the solution was simple. I made it complicated. In below image We can see the process of loading script,image, and css as well. In my case I had added script link above css like

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='menu.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

and its loads like image 2. so my script executes before the css is loaded. And I wasnt able to get the properties of css.

When I changed position as

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='menu.js'></script>

My script is executed after the completion loading the css(image 1). So Now it works perfect.