<nav role='navigation'>
  <ul id='main'>
    <li><a href="#"><span class="fa fa-home"></span>Home</a></li>
    <li><a href="#"><span class="fa fa-cubes"></span>Products</a></li>
    <li><a href="#"><span class="fa fa-automobile"></span>About Us</a></li>
    <li><a href="#"><span class="fa fa-users"></span>Clients</a></li>
    <li><a href="#"><span class="fa fa-rocket"></span>Rockets</a></li>
    <li><a href="#"><span class="fa fa-bug"></span>Bugs</a></li>
    <li><a href="#"><span class="fa fa-envelope"></span>Contact Us</a></li>
    <li class="more hidden" data-width="80">
      <a href="#"><span class="fa fa-ellipsis-h"></span>More</a>
      <ul></ul>
    </li>
  </ul>
</nav>
<div class="content">
  Resize the viewport to see items group together in a "more" item.
</div>

@import url(https://fonts.googleapis.com/css?family=Slabo+27px);

body {
  font-family: 'Slabo 27px', serif;
}
.content {
  padding: 40px 20px;
}
nav {
  margin-bottom: 20px;
  > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;    
    text-align: left;
    background: #68DE78;
    > li {
      &.more > a .fa {
        color: yellow;
      }
      &.hidden {
        display: none;
      }
      display: inline-block;
      position: relative;
      > a {
        border-right: 1px dashed lighten(#68DE78,25%);
      }
      a {
        font-size: 1rem;
        display: block;
        background: #68DE78;
        color: #FFF;
        text-align: center;
        text-decoration: none;
        padding: 10px 20px;
        .fa {
          font-size: 20px;
          display: block;
          margin-bottom: 10px;
        }
        + ul {
          display: none;
          position: absolute;
          top: 100%;
          right: 0;
          margin-right: 0;
          li {
            margin-top: 1px;
            a {
              padding-left: 16px;
              text-align: left;
              white-space: nowrap;
              .fa {
                display: inline-block;
                margin-right: 10px;
                margin-bottom: 0;
              }
            }
            a:hover {
              background: darken(#68DE78,20%);
            }
          }
        }
      }
      &:hover {        
        > a {
          background: darken(#68DE78,20%);
        }
        ul {
          display: block;
        }
      }
    }
  }
}

function calcWidth() {
  var navwidth = 0;
  var morewidth = $('#main .more').outerWidth(true);
  $('#main > li:not(.more)').each(function() {
      navwidth += $(this).outerWidth( true );
  });
  var availablespace = $('nav').outerWidth(true) - morewidth;
  
  if (navwidth > availablespace) {
    var lastItem = $('#main > li:not(.more)').last();
    lastItem.attr('data-width', lastItem.outerWidth(true));
    lastItem.prependTo($('#main .more ul'));
    calcWidth();
  } else {
    var firstMoreElement = $('#main li.more li').first();
    if (navwidth + firstMoreElement.data('width') < availablespace) {
      firstMoreElement.insertBefore($('#main .more'));
    }
  }
  
  if ($('.more li').length > 0) {
    $('.more').css('display','inline-block');
  } else {
    $('.more').css('display','none');
  }
}
$(window).on('resize load',function(){
  calcWidth();
});