title: jQuery Uncaught TypeError with offset().left
body: <p>My code, visually anyway, works fine, but I keep getting "Uncaught TypeError: Cannot Read property 'left' of undefined" in my console.  I have no clue what might be causing it. </p>
  
  <p>Specifically, the error is showing up on the following: line: </p>
  
  <pre><code>var left = $(this).siblings('li.active').offset().left - ($(this).parents('.hoverBar').offset().left + 20);**
  </code></pre>
  
  <p>The whole function for context:</p>
  
  <pre><code> $('.hoverBar li').hover(function(){
  
          var left = $(this).offset().left - ($(this).parents('.hoverBar').offset().left + 20);
          var width = $(this).width() + "px";
          var sictranslate = "translate("+left+"px, 0px)";
  
          $(this).parent('ul').next('div.floatr').css({
              "width": width,
              "-ms-transform" : sictranslate,
              "-webkit-transform": sictranslate,
              "-moz-transform": sictranslate,
              "transform": sictranslate
          });
  
      },
  
      function(){
  
          var left = $(this).siblings('li.active').offset().left - ($(this).parents('.hoverBar').offset().left + 20);**
          var width = $(this).siblings('li.active').width() + "px";
  
          var sictranslate = "translate("+left+"px, 0px)";
  
          $(this).parent('ul').next('div.floatr').css({
              "width": width,
              "-ms-transform" : sictranslate,
              "-webkit-transform": sictranslate,
              "-moz-transform": sictranslate,
              "transform": sictranslate
  
          });
  
      }).click(function(){
  
          $(this).siblings('li').removeClass('active');
  
          $(this).addClass('active');
  
          return false;
  
      });
  </code></pre>
  
  <p>And some relevant HTML:</p>
  
  <pre><code>&lt;nav class="head_nav"&gt;
  &lt;div class="hoverBar"&gt;
  &lt;ul id="navbar"&gt;
              &lt;li class="active"&gt;&lt;a href=""&gt;About&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Mission&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Board Members&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Staff&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Members&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Task Forces&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Events&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Description&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Registration with Outlook ICS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Online Payment&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Email auto-reminders&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Multiple registrants allowed&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="floatr"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>