Menu layout issue

css, html

Solution

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>
        <a href="#">Menu Item</a>
    </li>....

Change the css rule for `secondary-navigation-list`

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

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

Problem

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; } ```

Original source