html - 如何制作全宽下拉响应式菜单

Question

不知何故，我无法将此菜单管理到全宽 这是我的代码笔 http://codepen.io/anon/pen/xwDcb

我希望我的下拉菜单宽度从左到右为 100%。我做错了什么

body {
background-color:#000;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
width:100%;
}
.nav-full {
background:url(../images/nav-bg.png) no-repeat 0 0;
}
.nav-centre {
width:960px;
margin:0 auto
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before, .nav:after {
content:" ";
display: table;
}
.nav:after {
clear: both
}
.nav ul {
list-style: none;
}

我的html代码

<a class="toggleMenu" href="#">Menu</a>

<div class="nav-full">
<div class="nav-centre">
    <ul class="nav">
        <li><a href="index.html" class="active">HOME</a>

            <ul>
                <li><a href="#jquery-pagescroller-2">Indus Advantage</a>
                </li>
                <li><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a>
                </li>
                <li><a href="#jquery-pagescroller-4">Pipeline</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Products</a>

            <ul>
                <li><a href="#">Overview</a>
                </li>
                <li><a href="#">Exercise Physiology</a>
                </li>
                <li><a href="#">Manufacturing & Quality Control</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Patents & Publications</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Global Patenting Strategy</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Publications</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Partnering</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Enquiries - Product</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">About Us</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Vision & Values</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Contact Us</a>

        </li>
        <li> <a href="#">Careers</a> 
        </li>
    </ul>
</div>
</div>

Answer 1

检查这段代码

<style>
#nav { 
    height: 1; 
    list-style-type: none; 
    padding-top: 1.25em; 
    margin-top: 0em;
}

#nav > li {  /* Added ">" */
    float: right; 
    position: relative;
    padding: 0;
} 

#nav li a { 
    display: inline-block; /* was block */ 
    font-size: 14px; 
    padding: 0 1em;  
    margin-bottom: 1em; 
    color: #333; 
    text-decoration: none; 
    border-left: 1px solid #333; 
}

#nav .last, #nav li ul li a {
    border-left: none;
}

#nav li a:hover, #nav li a:focus {
    color: #666;
}

#nav li ul { 
    opacity: 0; 
    /*position: absolute; 
    right: 0em; */
    list-style-type: none; 
    padding: 0; margin: 0; 
}

#nav li:hover ul { 
    opacity: 1; 
}

#nav li ul li { 
    /*float: none; 
    position: static; 
    width: auto;*/ 
    height: 0; 
    line-height: 0; 
    background: none; 
    text-align: left; 
    margin-bottom: .75em;
}

#nav li:hover ul li { 
    height: 25px; 
    line-height: 2.5em;
}</style>
<ul id="nav">
<a class="toggleMenu" href="#">Menu</a>

<div class="nav-full">
<div class="nav-centre">
    <ul class="nav">
        <li><a href="index.html" class="active">HOME</a>

            <ul>
                <li><a href="#jquery-pagescroller-2">Indus Advantage</a>
                </li>
                <li><a href="#jquery-pagescroller-3">Positioning and flexibility of products</a>
                </li>
                <li><a href="#jquery-pagescroller-4">Pipeline</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Products</a>

            <ul>
                <li><a href="#">Overview</a>
                </li>
                <li><a href="#">Exercise Physiology</a>
                </li>
                <li><a href="#">Manufacturing & Quality Control</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Patents & Publications</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Global Patenting Strategy</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Publications</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Partnering</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Enquiries - Product</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Enquiries - Business Partnering</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">About Us</a>

            <ul>
                <li><a href="#jquery-pagescroller-0">Vision & Values</a>
                </li>
                <li><a href="#jquery-pagescroller-1">Conventional v/s the Indus Discovery Model</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Contact Us</a>

        </li>
        <li> <a href="#">Careers</a> 
        </li>
    </ul>
    </ul>
</div>
</div>