title: Cannot get span position with jQuery
body: <p>I have <a href="http://jsfiddle.net/uwg929yz/" rel="nofollow">this navigation here</a> and i need to make the submenu aligned with the topmenu anchor text.</p>
  
  <p>I can do that by moving the whole inner <code>ul</code> to the left with css. But it's a different amount for every <code>li</code> element. Since my anchor needs to be as big as the <code>li</code> i created a span around the text and my plan was to measure its distance form the parent and apply that number to <code>left</code> property of the inner ul. This is what i have so far:</p>
  
  <pre><code>    jQuery(document).ready(function(){
        menuAlign();
      });
  
      function menuAlign(){
        $('nav.main-nav &gt; ul &gt; li:not(.small)').each(function(){
          var self = $(this);
          var innerMenu = self.children('ul');
          var posOffset = self.children('.pos').position();
          innerMenu.css( "left", posOffset.left );
        });
      }
  </code></pre>
  
  <p>I get an error on this line <code>innerMenu.css( "left", posOffset.left );</code> saying:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'left' of undefined</p>
  </blockquote>
  
  <p>What am I doing wrong? Is there a way to achieve this with CSS?</p>