CSS 全页宽水平菜单和水平子菜单

Question

我正在尝试为我正在使用的网站创建一个解决方案，其中菜单和子菜单水平居中，但 div 扩展到整个页面宽度。

首先，这是一个示例 HTML：

 <div id="menu-container" class="full-width">
    <nav id="nav1" class="normal-width">
        <ul class="main-menu">
            <li id="item1">
                <a href="#">item 1</a>

                <ul class="sub-menu">
                    <li id="item11">
                        <a href="#">item 1.1</a>
                    </li>

                    <li id="item12">
                        <a href="#">item 1.2</a>
                    </li>

                    <li id="item13">
                        <a href="#">item 1.3</a>
                    </li>

                </ul>
            </li>

            <li id="item2">
                <a href="#">item 2</a>

                <ul class="sub-menu">
                    <li id="item21">
                        <a href="#">item 2.1</a>
                    </li>

                    <li id="item22">
                        <a href="#">item 2.2</a>
                    </li>
                </ul>
            </li>

            <li id="item3">
                <a href="#">item 3</a>
            </li>

        </ul>
    </nav>
</div>

这个菜单的 CSS 是：

 .full-width {
    width: 100%;
}

.normal-width {
    width: 1024px;
    margin: 0 auto 0 auto;
}

a {
    color: black;
    text-decoration: none;
}

.clear {
    clear: both;
}

.main-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;

    position: relative;
    background-color: red;
}

.main-menu > li {
    float:left;
    margin-right:2em;
}

.sub-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display:none;
    background-color: orange;
}

.sub-menu li {
    float:left;
    margin-right:2em;
}

.main-menu > li.selected {
    background-color:orange;
}

.main-menu > li.selected .sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
}

关联的 jQuery 是：

 // Add a clear div to allow adding background color to main-menu
$(".main-menu").append("<div class='clear'></div>");

// Make the first class selected
$(".main-menu > li:first").addClass("selected");

// Switch the selected class
$(".main-menu > li").click(function() {
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
});

// Disable menu links
$(".main-menu > li > a").click(function(e) {
    e.preventDefault();
});

所有这一切都很好，花花公子，并创建了一个适当的水平菜单。我苦苦挣扎但无法创造的是您在这张图片中看到的：

关于图片请注意以下几点：

1. 图片周围的黑色粗边框是网页的完整尺寸和宽度（即浏览器窗口边框）

2. 中间的细垂直紫色线不可见，它们在图片中向您显示内容的位置，即没有内容会越过紫色线的最左侧或最右侧

3. 顶级菜单项具有红色背景

4. 子菜单将出现在橙色背景区域

现在，问题：

请注意红色和黄色背景如何延伸到网页边缘，但这些页面的项目出现在紫色线内的内容区域内。这就是我想要实现但无法实现的目标。我无法将背景扩展到网络浏览器的边缘（即整页宽度）。 我的解决方案将红色和橙色背景居中。

原文由 Greeso 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在这里添加最终答案，以确保每个人都能看到我选择的答案（即为了更大的利益）。

这个答案的灵感来自 GraphicO，并进行了修改：

HTML：

 <nav>
    <ul class="main-menu" >
        <li id="item1">
            <a href="#">item 1</a>

            <div>
                <ul class="sub-menu">
                    <li id="item11">
                        <a href="#">item 1.1</a>
                    </li>

                    <li id="item12">
                        <a href="#">item 1.2</a>
                    </li>

                    <li id="item13">
                        <a href="#">item 1.3</a>
                    </li>

                </ul>
            </div>
        </li>

        <li id="item2">
            <a href="#">item 2</a>

            <div>
                <ul class="sub-menu">
                    <li id="item21">
                        <a href="#">item 2.1</a>
                    </li>

                    <li id="item22">
                        <a href="#">item 2.2</a>
                    </li>
                </ul>
            </div>
        </li>

        <li id="item3">
            <a href="#">item 3</a>
        </li>

    </ul>
</nav>

然后，CSS：

 a {
    color: black;
    text-decoration: none;
}

nav {
    position: relative;
    width: 100%;

    background-color: red;
}

.main-menu {
    margin: 0 auto;
    width: 1024px;

    list-style: none;
}

.main-menu > li {
    display: inline-block;
    margin-right: 2em;
}

.main-menu > li.selected {
    background-color: yellow;
}

.main-menu > li > div { /* nested div (containing the sub nav) will be hidden by default */
    width: 100%;

    position: absolute;
    left: 0;

    background-color: yellow;
    display:none;
}

.main-menu > li.selected > div {
    display: inline;
}

.sub-menu {
    list-style: none;

    margin: 0 auto;
    width: 1024px;
}

.sub-menu > li {
    display: inline-block;
    margin-right: 2em;
}

最后是 jQuery：

 // Make the first class selected
$(".main-menu > li:first").addClass("selected");

// Switch the selected class
$(".main-menu > li").click(function() {
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
});

// Disable menu links
$(".main-menu > li > a").click(function(e) {
    e.preventDefault();
});

谢谢。

原文由 Greeso 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是我想出的解决方案。

编辑：我将我的答案复制到帖子中，而不是链接到 jsfiddle …抱歉 mods：/

CSS：

 html, body, div, ul, li, a {margin: 0; padding: 0; border: 0;}
body {
    background-color: #000;
}
nav {
    background-color: #fff;
    position: relative;
    width: 100%;
}
ul {
    list-style: none;
    width: 100%;
}
li {
    display: inline-block;
}
a {
    display: block;
    padding: 0.25em 1em;
}
nav > ul {
    margin: 0 auto;
    width: 1024px;
}
nav ul li div { /* nested div (containing the sub nav) will be hidden by default */
    background-color: #ccc;
    width: 100%;
    position: absolute;
    left: -9999px;
}
nav ul li div ul {
    margin: 0 auto;
    width: 1024px;
}
nav > ul > li:hover > a {  /* swap ":hover" with ".active" to allow this to work as a class */
    background-color: #ccc;
}
nav > ul > li:hover > div { /* swap ":hover" with ".active" to allow this to work as a class */
    left: 0;
}

HTML:

 <nav>
        <ul class="nav">
            <li>
                <a href="#">item 1</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 1.1</a>
                        </li>

                        <li>
                            <a href="#">item 1.2</a>
                        </li>

                        <li>
                            <a href="#">item 1.3</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li>
                <a href="#">item 2</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 2.1</a>
                        </li>

                        <li>
                            <a href="#">item 2.2</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="active">
                <a href="#">item 3</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 3.1</a>
                        </li>

                        <li>
                            <a href="#">item 3.2</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li>
                <a href="#">item 4</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 4.1</a>
                        </li>

                        <li>
                            <a href="#">item 4.2</a>
                        </li>

                        <li>
                            <a href="#">item 4.3</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

看一看，自己测试一下，看看它是否能解决你的问题。

笔记：

• 我在 css 中使用了 :hover ，这样你就可以真正看到发生的变化。
• 要以您想要的方式实现这一点，您需要将“活动”类硬编码到顶级列表项中……或者……您可以使用一些 javascript 来更动态地执行此操作。
• 您会看到我留下评论的最后两行 css…只需将 :hover 替换为 --- .active
• 我唯一需要添加到 html 的是一些容器 div 来包装每个子菜单。这是我能找到的使您的子导航在页面上居中的唯一方法.. 同时允许一条颜色带延伸到页面上。

我的 CSS 可能有点乱，但那只是因为我有点把它放在一起了。您可以根据自己的喜好来设计样式。

希望你喜欢！如果您需要任何说明，请告诉我。

编辑：哦忘了提..我去掉了你在那里的所有 id 和类，功能不需要它们……但是如果你想将特定颜色与特定子菜单相关联，那么你会想要放回一些 id。

原文由 Grapho 发布，翻译遵循 CC BY-SA 3.0 许可协议