Get real height of div plus css generated content (if possible)

I'm trying to use javascript to give three ULs nested inside divs a negative top position equal to their height. I've got it working, sort of (thanks to help from here!) but instead of calculating the height of each nested UL and calculating the top position accordingly, each UL is being assigned a negative top position of -367px:

<script type="text/javascript">
$(document).ready(function() {
    //Get height of footer popup
    var pHeight = $('footer ul li > ul').outerHeight(); 
    //Calculate new top position based on footer popup height
    var nHeight = pHeight + "px";         
    $('footer ul li > ul').css({ 
        //Change top position to equal height of footer popup
        'top' : "-" + nHeight    
    });
});
</script>

I've tried this using .height, .outerheight, and even .getheight which someone mentioned on the Jquery documentation for 开发者_运维问答.height. I also tried using an each statement, though it didn't seem to work; I may have written it incorrectly.

In addition (if possible), I'd like the negative position to take into account the height of a content being generated using the css :after psuedo-property, though I can always manually add that in to the calculation if javascript has no way to access that.

EDIT: Added a test page link. It's the bottom divs (and nested ULs) I'm trying to target with JS; the "tails" on each box should line up at about 1.2em above their parent divs.

http://www.qualityprinters2.com/test/float-tab-test.html

I think what you're looking for is the each() jquery function (see http://api.jquery.com/each/). When your selector 'footer ul li > ul' returns more than one element, it is only computing the height of the first matched element.