JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/18240844/css-full-page-width-horizontal-menu-and-horizontal-submenu/

HTML

<div id="menu-container" class="full-width">
        <div class="full-width-bg"></div>
        <ul class="main-menu normal-width">
            <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>
    </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;
    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;
}

JavaScript

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