more if to many

by aaronk85

HTML

<div id="sitewrap">
<div id="wrap">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Share</a></li>
<li><a href="#">Extra Info</a></li>
<li><a href="#">Extra Info</a></li>
</ul>
</div>



<div id="wrap2">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Register</a></li>
<li>
    <a href="#">More</a>
    <ul>
<li><a href="#">Share</a></li>
<li><a href="#">Extra Info</a></li>
<li><a href="#">Extra Info</a></li>
    </ul>
    </li>
</ul>
</div>
    </div>

CSS

body {
    background: black;
    padding: 0;
    margin: 0;   
    color: #fff;
}

#sitewrap {
    float: left;
    width: 300px;
}

#wrap, #wrap2 {
    float: left;
    height: 40px;
    letter-spacing: -0.2px;
    width: 300px;
    z-index: 1000;
    background: red;
    margin: 0 0 100px 0;
}

ul {
    font-size: 12px;
    position: relative;
    z-index: 1000;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

ul li {
    float: left;
}

li a {
    display: block;
    padding: 12px 12px 13px;
    text-decoration: none;
    color: #fff;
}

li ul {
   width: 69px;  
}

JavaScript

$(document).ready(function() {
 var listWidth = [];
$('#wrap ul li').each(function() {
    listWidth.push($(this).width());
});
   
var total = 0;
for (var i = 0; i < listWidth.length; i++) {
    total += parseInt(listWidth[i]);
}
    if (total > 300) 
    {
    alert ('to big');    
    }
    
    else {
     alert ('nice');    
    }
    
//$('li').append('<li>more<ul><li>...</li></ul>');    
    
});