CSS full-page-width horizontal menu and horizontal submenu

css, html, menu, submenu

Solution

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.

Problem

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: The black thick border around the picture is the webpage full size and width (i.e, the browser window borders) 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 The top level menu items have the red background 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.

Original source