title: Finding the last visible li element within overflow:hidden element (jquery)
body: <p>I have a horizontal menu with overflow:hidden applied to it.</p>
  
  <p>The menu is CMS managed so sometimes it will not overflow, however when it does overflow I want to find the last visible li element and insert a drop down ul with the overflowing menu items in it.  The problem i'm having is selecting the last li that is visible (in order to insert HTML before it) as elements hidden by overflow:hidden still seem to count as visible.</p>
  
  <p>My code so far is:</p>
  
  <pre><code>$(window).load( function () {
  
      var totalWidth = 0;
      var menu = $('.nav .menu ul');
      var menuWidth = menu.innerWidth();
  
      menu.find('li').each(function() {
         totalWidth += $(this).innerWidth() + 30; // add margin
      });
  
      if (totalWidth &gt; menuWidth) {
  
          var num_li = $('.nav .menu ul &gt; li:visible').length;
  
          $('.nav .menu ul li:nth-child('+num_li+')').append("&lt;li&gt;&lt;a&gt;More&lt;/a&gt;&lt;/li&gt;");
      }
  
  });
  </code></pre>
  
  <p>The variable num_li is returning the full number of li elements rather than just the ones visible to the person looking at the page!</p>