Html 菜单布局问题

我正在做一份花哨的菜单，但似乎无法解决当前面临的问题。以下是一张图片来说明问题：

整个过程是使用nav标记构建的，该标记带有ul和li子项

基本上，右框必须始终保持在顶行、右边缘，当窗口缩小或缩小时，该位置/行为必须保持，其他常规菜单项应在第二行折叠

这两个框必须保持一个顺序：左边的一个是第一个li元素，右边的一个是最后一个li元素

以下是我迄今为止所尝试的：

-绝对位置不会削减它，因为它确实会停留在右边，但它可能会或可能不会覆盖其他元素（当前情况）

-浮动它，可能会与下一行的其他元素一起崩溃

-在nav或ul标签上添加一个填充物是可行的，但是，其他菜单项总是有一个右边距，不允许它们落在正确的长方体下

下面是一个问题（缩小结果窗口）：

我对任何想法都持开放态度，即使是改变整个标记（如果这是解决方案），或者是一些花哨的js（如果可行的话）。谢谢大家!

所使用的标记：

<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>

---

您可以通过对html和css进行一些操作来实现：

更改li的顺序，使2个特殊的位于顶部

<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>....

---

请参见fiddle:

解释得很好，+1这可能不是最佳的CSS解决方案，但您不能只使用两个菜单吗？您可以使用position:absolute，只需在框的相同宽度的“ul”上添加填充，这样它就不会覆盖text@Paulie_D事实上他不能，如果你看到它是如何工作的：）@fatman，它不会工作的，或者至少我认为它仍然会覆盖文本，或者项目将有来自填充的空白我的上帝很简单，从未在我脑海中出现：）我认为这是唯一的方法，但是如果其他人有其他想法，通过保持顺序：李元素中的第一个长方体和最后一个长方体，我会欢迎的。非常感谢@fatman！

<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>....

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