Create a centered logo in a navigation list

HTML

<div id="logo"></div>
<nav>
<ul>
    <li>Home</li>
    <li>Projects
        <ul>
            <li>TimThumb</li>
            <li>WordPress Themes</li>
            <li>Video Games</li>
        </ul>
    </li>
    <li>Contact</li>
    <li>About</li>
    <li>Blog</li>
    <li>Blog</li>
    <li>Testimonials (a long title)</li>
</ul>
</nav>

CSS

#logo {
    background:#f00;
    display:block;
    width:50px;
    height:50px;
    margin:0 auto -50px auto;
}

nav {
    text-align:center;
    padding:15px;
}

nav ul {
    padding:0;
    margin:0;
}

nav li {
    display:inline-block;
    list-style-type:none;
    text-transform:uppercase;
    padding:5px 10px;
    font-size:0.8em;
    position:relative;
}

nav li ul {
    width:100px;
    text-align:left;
    position:absolute;
    left:0;
    background:#eee;
    margin:5px 0 0 0;
    padding:0;
}

JavaScript

fvar total_width = 0;
var center = 0;
var center_item = null;
var top_level_menus = $('nav > ul > li');
var nav_sized = false;

top_level_menus.each(function() {
    total_width += $(this).outerWidth( true );
});

center = total_width / 2;

// work out center item
top_level_menus.each(function() {
    total_width -= $(this).outerWidth( true );
    if ( ! nav_sized && total_width <= center ) {
        $(this).css( 'padding-right', '100px' );
        $(this).next().css( 'padding-left', '100px' );
        nav_sized = true;
    }
});