Css 如何让ZURB基金会上栏下拉菜单100%的宽度？

进行了一些搜索，但只找到了megaBar的信息。希望有100%个宽度下拉宽度，并以最小的CSS/JS在基础之上实现。

我想做一个子菜单（ul>li.has-dropdown->ul.dropdown），它的窗口宽度为100%，与Mashable上的窗口宽度相似，并在悬停时显示。基础MeGabar位于嵌套的Nav结构之外，但这不是我想要的WordPress模板（希望停留在嵌套的Walk类型菜单树中）。 如果你将鼠标悬停在上面的任何一个菜单链接上，你会看到我想要复制的下拉子菜单（只是结构，而不是内容）

我使用基础3.2并具有<代码> <代码>安装程序，使其固定在顶部，始终保持100%个窗口宽度，而顶部栏的代码<>最大宽度：1440px，就像MasHable站点。

---

现在只需要下拉（子菜单）部分。

这个UI组件不是基础的一部分（参见）。正如您已经提到的，仅限于显示嵌套菜单元素

---

创建与MasHabess站点相同的功能超出了基础的范围，将涉及到自己开发的功能。问题是IMHO。

< p>这个UI组件不是基础的一部分（参见）。正如您已经提到的，仅限于显示嵌套菜单元素

---

创建与MasHabess站点相同的功能超出了基础的范围，将涉及到自己开发的功能。问题是IMHO。

基金会具有下拉菜单的功能，因此您可以用基础框架复制MaseLable使用的导航类型。

如果您阅读了文档：

您将在导航栏示例中看到，导航项4有一个下拉列表，其中有自己的行/列。根据文档，“您还可以具有特定大小的下拉列表，其中可以包含任何类型的内容，包括行和列。”

---

您应该能够指定下拉的大小，使其跨越页面，通过使用CSS来改变弹出类的大小。

基金会具有下拉菜单的功能，这样您就可以用MaskFramework复制Masable所使用的导航类型。

如果您阅读了文档：

您将在导航栏示例中看到，导航项4有一个下拉列表，其中有自己的行/列。根据文档，“您还可以具有特定大小的下拉列表，其中可以包含任何类型的内容，包括行和列。”

---

您应该能够通过使用CSS更改弹出型按钮类的大小来指定下拉菜单的大小，使其跨越页面。

这将重置顶栏子菜单为顶栏宽度的100%，并将子菜单项组织在响应列中，就像弹出式内容一样，但仍保留小屏幕上的导航行为

@media only screen and (min-width: $screenSmall) {

    nav.top-bar > section > ul > li.has-dropdown{
        position: static;
        & > .dropdown{
            @include outerRow();

            & > li.has-dropdown{
                @include column(3);
                min-width: auto;

                .dropdown{
                    @include outerRow();
                    position: static;
                    visibility: inherit;
                    top: auto !important;
                    left: auto !important;
                    padding: 0;
                    min-width: auto;
                    li{
                        @include column(12);
                         min-width: auto;
                    }
                }
            }
        }
    }
}

---

这会将顶栏子菜单重置为顶栏宽度的100%，并将子菜单项组织在响应列中，就像弹出式内容一样，但仍保留小屏幕上的导航行为

@media only screen and (min-width: $screenSmall) {

    nav.top-bar > section > ul > li.has-dropdown{
        position: static;
        & > .dropdown{
            @include outerRow();

            & > li.has-dropdown{
                @include column(3);
                min-width: auto;

                .dropdown{
                    @include outerRow();
                    position: static;
                    visibility: inherit;
                    top: auto !important;
                    left: auto !important;
                    padding: 0;
                    min-width: auto;
                    li{
                        @include column(12);
                         min-width: auto;
                    }
                }
            }
        }
    }
}

---

我到处寻找一个简单的答案，让下拉菜单100%的容器，并发现它在这里：

一个基本风格是：

.open {left: 0 !important;}

---

我到处寻找一个简单的答案，让下拉菜单100%的容器，并发现它在这里：

一个基本风格是：

.open {left: 0 !important;}

---

你能详细解释一下为什么你觉得这个问题不适合stack吗？您链接到的页面没有显示任何会取消此问题资格的内容。@stacko“并非所有问题都符合我们的格式。请避免提出主要基于意见的问题，或可能引发讨论而非答案的问题。”有许多不同的方法来构建您的问题。也许你可以再问一个问题，找到Zurb基金会之外的现有替代品。“NoiSigoLordn不总是有几种方法来构建任何东西吗？你能详细说明为什么你觉得这个问题不适合堆栈吗？”您链接到的页面没有显示任何会取消此问题资格的内容。@stacko“并非所有问题都符合我们的格式。请避免提出主要基于意见的问题，或可能引发讨论而非答案的问题。”有许多不同的方法来构建您的问题。也许你可以再问一个问题，找到Zurb基金会之外的现有替代品。