Tricky Responsive horizontal menu bar

Question

I have a sub navigation bar that has 6 items or maybe more. What I am trying to do is that when the browser is resized, a "more" icon appears based on the space available, and each item of the drop down goes into the sub menu one by one as the size of the viewport decreases.

I have attached a screenshot of the design requirement. I am looking for a way to get this done in pure css or using media queries.

Any help would be appreciated.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div>
    </nav>

Answer 1

here is a working example of what you describe. (its ugly I did not spend much time on styling)

The idea is to use media query combined with nth-child selectors to reveal only the desired elements.

    <ul class="nav">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>

    <ul id="more">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
    </ul>


    ul, li{
      list-style:none;
      }
    .nav > li{
      display:inline-block;
      width:100px;
      height:50px;
      border:1px solid black;
      font-size:20px;
      text-align:center;
      box-sizing:border-box;
      padding-top:10px;
      background:white;
      margin:5px;
      vertical-align:top;
    }

    .nav{
      background:beige;
      padding:10px;
      height:55px;
      overflow:hidden;
      whitespace:no-wrap;
    }

    #more  {
    display:none;
      margin:0;
      padding:2px;

      width:40px;
    position:absolute;
      top:20px;
      right:0;
      border-left:4px solid black;
      padding-top:60px;
    }

    #more > li{
      font-size:10px;
      border:1px solid black;
      width:100%;
      margin:2px 0;
     box-sizing:border-box;
      display:none;

    }




    @media screen and (max-width: 700px) {
        #more {
            display:block;
        }

       #more:hover li:nth-child(6) {
            display:block;
        }
    }



    @media screen and (max-width: 600px) {
        #more {
            display:block;
        }

       #more:hover li:nth-child(5) {
            display:block;
        }
    }