Menu layout issue - html

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>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</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:
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>
Menu Item
</li>....
Change the css rule for secondary-navigation-list
.menu-last-item-block{
float:right;
}
see fiddle: http://jsfiddle.net/CLtCL/12/