<ul> aukščio skaičiavimas su JS

Sveiki, ir vėl aš su klausimu, iškilo dar viena problema.

Turiu toki scriptuką:

$content.each(function(i) {
   var $el = $(this);
   // save each content's height (where the menu items are)
   // and hide them by setting the height to 0px
   $el.data('height', $el.outerHeight(true)).css('height', '0px').show();
});

Tokioje situacijoje:

<div id="sbi_container" class="sbi_container">
       <div class="sbi_panel" data-bg="images/1.jpg">
           <a href="#" class="sbi_label">About</a>
           <div class="sbi_content">
               <ul>
                   <li><a href="#">Subitem</a></li>
                   <li><a href="#">Subitem</a></li>
                   <li><a href="#">Subitem</a></li>
               </ul>
           </div>
       </div>
       <div class="sbi_panel" data-bg="images/2.jpg">
           ...
       </div>

Problema ta, jog kažkodėl, kai <li> elementas sudarytas iš daugiau negu vieno žodžio, kažkodėl pačioje apačioje pasidaro, nereikalingas tusčias tarpas.. O kai žodis tiesiog būna ilgas, viskas būna tvarkoje.. Toks Įspūdis jog skaičiuojamas ne <ul> aukštis, o tarpai žodžiuose, arba patys žodžiai.

Naudoju šita kaip pagrindą (http://tympanus.net/codrops/2011/07/03/sliding-background-image-menu/)

Iš anksto dėkui už pagalbą. :)