Основание 6: Могу ли я иметь выпадающее меню, ограниченное шириной контейнера сетки, с подменю, ширина которого простирается до краев браузера?

Question

В Foundation XY Grid я пытаюсь создать выпадающее меню с заданной шириной grid-container, но раскрывающееся подменю расширяется за пределы контейнера до краев браузера.

Я попытался настроить подменю для использования:

.sub-menu {
  position: absolute;
  left: 0;
  width: 100vw;
}

но все, что это делает, это выравнивает левый край подменю по левому краю либо его родителя (в примере ниже, пункт 3), либо краю .grid-container,

<style>
  .sub-menu {
    position: absolute;
    left: 0;
    width: 100vw;
  }
</style>

<div class="grid-container-full">
  <ul class="grid-container dropdown menu" data-dropdown-menu>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
      <ul class="vertical menu nested sub-menu">
        <li><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
        <li><a href="#">Item C</a></li>
      </ul>
    </li>
  </ul>
</div>

Я бы хотел, чтобы он прошел до левого края браузера, который находится за границей .grid-container,

Решение

Я могу достичь этого пользовательского интерфейса, используя вместо этого выпадающее меню вместо выпадающего меню, которое позволяет мне перемещать панель за пределы его родительского элемента в контейнер полной ширины.