Trying to find the width of hidden content in order to resize the containing div to show the content (jQuery)

I am trying to create a resizing container that will "grow" on $('element').hover, but I only want to do so when the content in the LI is to wide and hidden due to a css overlow:hidden. I can't seem to find a way to find the total widht of the hidden content. For example:

<ul id="innerContainer">
<li><a href="/Afrikaans/index.html">Afrikaans</a></li>
    <li><a href="/Arabic/index.html">Arabic</a></li>
    <li><a href="/Chinese/index.html">Chinese (Mandarin) What The Its Just Crazy</a></li>
</ul>

The li containing the Chinese (Mandarin)... is too wide to fit in the 172px wide container. I want to be able to find out the width on .hover() so I can resize the container to fit. I need it to be dynamic because the li that is too wide will not always conatin the same content. CSS is :

#innerContainer {position:absolute; left:0; top:0; height:200px开发者_高级运维; overflow:hidden;}
#scroller ul {margin:0; padding:0; list-style:none;width:172px;}
#scroller ul li {float:left; height:27px; width:172px;}
#scroller ul li a {overflow:hidden;display:block; float:left; height:26px; line-height:26px; width:172px; font-size:11px; color:#000; font-weight:bold; text-decoration:none; text-indent:5px; border-bottom:1px solid #000;}

All i can get is the actual width which is 172px.

Take into consideration that the items are already in a vertically scrollable container. An example of this in action is at http://www.pronunciator.com/Vietnamese/index.html You can see how the rows in the menu that are too wide overflow into the next line. I killed that by using overflow:hidden. Now i need to find the width of the line of hidden text.

Thanks in advance for any replies.

Ok..so i went with a little different solution that simplified the fact that in the production version of this I have many outer divs that end up neeind to be set to auto width in order to follow the suggestions above. Instead I created a div absolutely positioned off the page with the same font size, weight, and family settings as the anchor links in the LI's. On hover I fill the hidden div whos width is set to auto with the contents of $(this).html() and then I call .width() on the hidden div (#test). It looks like this:

$('#test').html($(this).html());
var new_width = $('#test').width();

two sweet little lines of code that return exactly what I need. Thanks everybody for your help. I wouldnt have figured this out without you guys.

EDIT: I've updated my example here to meet your new requirements. Roll over the list items to return the width of the hovered item.

You have to set the widths of the containing elements to auto, grab the width, and then reset them to 172px. This happens fast enough with jQuery that there will be no flicker.

See my example here.

You can get the rendered width with jquery:

$("#innerContainer").width()