Jquery :: Dynamic Width On Dropdown Submenu

I spent way too long writing a buggy and bloated jQuery script that is supposed to allow the sub-menus of a drop-down menu be a dynamic width (i.e. the submenu assumes the width of the widest list item). I am probably missing some base CSS property, surely it cant be this hard? My script I wrote is:

// drop down menu
var setWidth = 2;
var nextSetWidth = 0;
$jQ('.nav li').hover(function(){
var thisList = $jQ(this).parent('ul');
if (thisList.parent('li').length > 0) {
thisList.children('li').each(function(){
var thisSpan = $jQ(this).find('span');
var spanWidth = thisSpan.width();
if (spanWidth > setWidth) {
setWidth = spanWidth;
}});
setWidth = setWidth + 16;
thisList.css('width', setWidth);
}

var nextList = $jQ(this).find('.nav:eq(0)');
if (nextList.parent('li').parent('ul').parent('li').length == 0){
nextList.css('left', '2px');
}

nextList.children('li').each(function(){
var nextThisSpan = $jQ(this).find('span');
var nextSpanWidth = nextThisSpan.width();
if (nextSpanWidth > nextSetWidth) {
nextSetWidth = nextSpanWidth;
}});

nextSetWidth = nextSetWidth + 16;
nextList.css('width', nextSetWidth);
if (nextList.parent('li').parent('ul').parent('li').length > 0){
nextList.css('left', setWidth);
}}, function(){
$jQ(this).find('.nav:eq(0)').css('left','9999em');
setWidth = 2;
nextSetWidth = 0;
});
//End of Drop down menu

The HTML looks something like:
<ul class="nav">
<li><a><span></span></a></li>
<li><a><span></span></a></li>
<li><a><span></span></a>
<ul class="nav">
<li><a><span></span></a></li>
</ul>
</li>
</ul>