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

我正在尝试为我正在开发的网站创建一个解决方案，其中菜单和子菜单水平居中，但 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();
});

All that is nice and dandy, and a proper horizontal menu is created. What I am struggling with and I am unable to create is what you can see in this picture:

请注意该图片的以下几点：

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

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

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

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

现在，解决问题：

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

这是我想出的解决方案。

编辑：我将我的答案复制到帖子中，而不是链接到 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>

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

Notes:

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

我的 CSS 可能有点乱，但这只是因为我把它放在一起。您可以按照您想要的方式设计它。

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

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