这里，为了确保每个人都看到我选择的答案（即，更大的好）。

这个答案是从GraphicO的灵感， / p>

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 =＃>项目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 =＃>项目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; 
} 

。主菜单{
 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 {/ *嵌套的div（包含子导航）将被默认隐藏* / 
 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菜单> li {
 display：inline-block; 
 margin-right：2em; 
} 
 

最后jQuery：

  //选择第一个类
 $（。main-menu> li：first）。addClass（selected）; 

 //切换所选的类
 $（。main-menu> li）click（function（）{
 $（。selected）。removeClass （selected）; 
 $（this）.addClass（selected）; 
}）; 

 //禁用菜单链接
 $（。main-menu> li> a）。click（function（e）{
 e.preventDefault 
}）; 
 

感谢。

I am trying to create a solution for a website I am working on in which menus and sub-menus are horizontally centred, but the divs extend to full page width.

First off, here is a sample 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>

The CSS for this menu is:

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

And the jQuery associated is:

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

Note the following about the picture:

1. The black thick border around the picture is the webpage full size and width (i.e, the browser window borders)

2. The thin vertical purple lines in the middle are not visible, they are in the picture to show you where the content would be, i.e, no content will go over to the far left or far right sides of the purple lines

3. The top level menu items have the red background

4. The sub menues will appear in the area with the orange background

Now, to the problem:

Notice how the red and yellow backgrounds extend to the webpage edges, yet the items of those pages appear within the content area inside the purple lines. This is what I am trying to achieve but unable to. I am unable to extend the backgrounds to the edges of the web browser (i.e., full-page width). My solutoin centres the red and orange backgrounds in the middle.

I am adding the final answer here, for the sake of ensuring that every one sees the answer I chose (i.e, for the greater good).

This answer is inspired by GraphicO, with modifications:

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

Then, the 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;
}

And finally the 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();
});

Thanks.