Центрировать элементы подменю с переменной шириной

Я пытаюсь центрировать подменю под пунктом меню, но мне кажется чтобы это было блокпостом. Вот рабочий пример того, где я сейчас нахожусь: http://jsfiddle.net/zCWXb/

Поскольку подменю имеет переменную ширину, я не могу понять, как бы вы расположили его в по центру относительно родительского пункта меню.

HTML:

    
Menu Item 1
    
Menu Item 2
        

            
Sub Item 1
            
Sub Item Long Name Example 2
            
Sub Item 3
        
    
    
Menu Item 3

CSS:

/*
    NAV
*/
body {
    background: #000;
}

.menu {
    position: absolute;
    left: 40px;
    top: 20px;
    color: #d6dcbd;
    font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.menu .sub-menu {
    text-align: center;
    display:none;
    padding-top: 4px;
    width: auto;
    z-index: 20;
    position: absolute;
    left: -6px;
}
.menu .sub-menu li {
    text-align: center;
    background: #a9d6e4;
    display: block;
    float: none;
    width: auto;
    white-space: nowrap;
    padding: 4px 6px;
    margin-bottom: 3px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.menu .sub-menu li a {
    color: #121212;
    text-transform: uppercase;
}
.menu .sub-menu li:hover {
    color: #FFF;
    background: #d6dcbd;
}
#menu-default > li {
    float: left;
    position: relative;
}

.menu li {
    width: auto;
    position: relative;
    display: block;
    float: left;
    padding: 0 25px 0 0;
}
.menu a {
    font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif;
    color: #d6dcbd;
    text-decoration: none;
}
.menu a:hover {
    color: #FFF;
}

.menu .current-menu-item a {
    color: #FFF;
}

jQuery

$('.menu li').hover(
        //Mouseover, fadeIn the hidden hover class 
        function() {
            $(this).children('.sub-menu').stop(true, true).fadeIn('1000');   
        },
        //Mouseout, fadeOut the hover class
        function() {
            $(this).children('.sub-menu').stop(true, true).fadeOut('1000');  
    })