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

一切都很好，花花公子，并创建一个合适的水平菜单。我正在努力解决的问题是我无法创造的是你在这张照片中可以看到的： enter image description here

请注意以下图片：

图片周围的黑色粗边框是网页的全尺寸和宽度（即浏览器窗口边框）
中间的细垂直紫色线条不可见，它们在图片中显示内容的位置，即没有内容会转到紫色的最左侧或最右侧线
顶级菜单项具有红色背景
子菜单将出现在橙色背景区域

现在，问题是：

注意红色和黄色背景如何延伸到网页边缘，但这些页面的项目显示在紫色线条内的内容区域。这是我想要实现但无法实现的目标。我无法将背景扩展到Web浏览器的边缘（即，整页宽度）。 我的solutoin将红色和橙色背景置于中间位置。

Answer 1

这是我提出的解决方案。

编辑：我将我的答案复制到了帖子，而不是链接到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和类，它们不需要功能......但如果你想将特定的颜色与特定的子菜单相关联，那么你会想把几个身份放回来。

Answer 2

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

这个答案的灵感来自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();
});

感谢。

Answer 3

如果我理解了你的问题，这应该会让你顺利开始：

http://jsfiddle.net/X7T94/

确实需要在主菜单li上放置class="active"作为活动项目。 HTML的其余部分是相同的。 CSS：

.full-width {
    width: 100%;
}

.normal-width {
    width: 1024px;
    margin: 0 auto 0 auto;
}
.main-menu > li {
    float:left;
    list-style-type:none;
    padding-right:30px;
}
.sub-menu {
    display:none;
}
.sub-menu li {
    float:left;
    padding-right:30px;
}
.main-menu li.active {
    background-color:blue;
}
.main-menu > li.active .sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
    background-color:blue;
}

显然它并不完美或美丽，但它应该让你在路上。

Answer 4

通过一点修改后的HTML和javascript，以下菜单运行良好（使用IE7-10，Chrome，Firefox，Opera和Safari测试）：

HTML

<div id="menu-container" class="full-width">
    <div class="full-width-bg"></div>  <!-- this additional div makes red background -->
    <ul class="main-menu normal-width">
        ... etc ...
    </ul>
</div>

CSS

.full-width {
    width: 100%;
    background: orange;
    border:1px solid green;
    position:relative;
    z-index:1;
    height:3em;
    font-size:21px;
}
.full-width-bg {
    width:100%;
    background: red;
    height:50%;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}
.normal-width {
    width: 1024px;
    margin: 0 auto;
    z-index:3;
    position:relative;
}
.full-width, .full-width-bg {
    min-width: 1024px;
}
ul.main-menu li {
    float:left;
    padding:0;
    margin:0;
    height:100%;
    position:static;
    text-align:center;
}
ul.main-menu, ul.main-menu ul {
    list-style-type:none;
    height: 1.5em;
    margin: 0 auto;
    padding: 0;
}
ul.main-menu a {
    text-decoration:none;
    display:inline-block;
    *display:inline; zoom:1; /* IE7 fix */
    width:100%;
    padding:0;
    max-height: 1.5em;
}
ul.main-menu > li {
    background-color:red;
}
ul.main-menu > li > ul > li {
    background-color:orange;
}
ul.main-menu > li > ul > li:hover {
    background-color:yellow;
}
ul.main-menu > li > ul > li:hover > a {
    color:red;
}
ul.main-menu > li > ul {
    position:absolute;
    top:100%;
    left:0px;
    width:100%;
}
.main-menu > li.selected,
ul.main-menu > li:hover > a {
    background-color:#d00;
    color:white;
}
ul.main-menu > li > ul {
    display:none;
    z-index:4;
}
ul.main-menu > li:hover > ul {
    display:block;
    z-index:5;
}

的jQuery

$(function () {
    var items = $('.main-menu>li');
    var maxitems = 5; //items.length;
    var current = items[0];
    $('.main-menu li').css('width', (100 / maxitems | 0) + '%');
    items.mouseenter(function(e) {
        $(current).removeClass('selected').children('ul').hide();
        current = this;
        $(current).addClass('selected').children('ul').show();
    });
    items.children('ul').show().end().eq(0).trigger('mouseenter');
});

JSFiddle：http://jsfiddle.net/X7T94/12/ - 此主菜单保留5个菜单链接的位置（请参阅javascript）

Answer 5

您的课程.normal-width（定义宽度为1024px）需要在您的内容上，而不是在您的菜单上（您想要100％宽度）

只需将其从菜单中删除，然后将其添加到您的内容中，就像这样：

<div id="menu-container" class="full-width">
   <nav id="nav1">
      ...
   </nav>   
</div>
<div class="content normal-width">Content goes here</div>

<强> FIDDLE

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

5 个答案: