Menu layout issue

Question

I'm working on a fancy menu of some sort, but cant seem to get my head around a problem currently facing. Here's a image to illustrate the problem:

The whole thing is built using a nav tag that has a ul with li children.

Basically the right box thingy has to always stay on the top row, right edge, and when the windows is shrunken or smaller, this position/behavior has to maintain, and the other regular menu items should collapse on the second row.

The 2 boxes have to maintain a order: the one on the left is the first li element, and the one on the right is the last li element

Here's what I've tried so far:

-position absolute wont cut it, because it will indeed stay on the right, but it may or may not overlay the other elements(current situation);

-floating it, will probably collapse with the other elements on the next row

-adding a padding right to the nav or ul tag, will work, however, the other menu items will always have a right margin that wont allow them to ever fall under the right boxy thing;

Heres a js fiddle to the problem(shrink the results window): menu issue

I'm open to any ideas, even changing the whole markup if that's the solution, or some fancy js if its working. Thank you!

The markup used:

<nav class="secondary-navigation main-section">
<ul class="align-left secondary-navigation-list">
    <li class="menu-item-block">

    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li class="menu-item-block menu-last-item-block">

    </li>
</ul>

The css used:

a{
   text-decoration: none;
   color: #656565;
   padding: 10px;
   font-size: 1.4em;
   line-height: 50px;
 }
.menu-item-block{
   width: 50px;
   height: 50px;
   background: #656565;
}
.menu-last-item-block{
   position: absolute;
   top: 0;
   right: 0;
}
ul, li {
   margin: 0;
   padding: 0;
   list-style: none;
}
li{
   float: left;
}
nav.secondary-navigation{
   position: relative;
   display: inline-block;
   width: 100%;
}
nav.secondary-navigation:after{
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 5px;
   background: #656565;
}
ul.secondary-navigation-list:after,
ul.secondary-navigation-list:before{
   content: '';
   position: absolute;
   width: 5px;
   height: 100%;
   background: #656565;
}
ul.secondary-navigation-list:before{
   left: 0;
}
ul.secondary-navigation-list:after{
   right: 0;
}

Answer 1

You can do it by a little manipulation on the html and css:

1. change the order of the li so that the 2 special ones are on top

   <ul class="align-left secondary-navigation-list">
       <li class="menu-item-block">
   
       </li>
       <li class="menu-item-block menu-last-item-block">
   
       </li>
       <li>
           <a href="#">Menu Item</a>
       </li>....
   

2. Change the css rule for secondary-navigation-list

   .menu-last-item-block{
        float:right;
    }
   

see fiddle: http://jsfiddle.net/CLtCL/12/