how can I make a full width dropdown responsive menu - html

Question

I am somehow not been able to manage this menu to full width
this is my codepen
http://codepen.io/anon/pen/xwDcb
i want my dropdown menu width to be 100% from left to right. What am I doing wrong
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;
}
my html code
<a class="toggleMenu" href="#">Menu</a>
<div class="nav-full">
<div class="nav-centre">
<ul class="nav">
<li>HOME
<ul>
<li>Indus Advantage
</li>
<li>Positioning and flexibility of products
</li>
<li>Pipeline
</li>
</ul>
</li>
<li> Products
<ul>
<li>Overview
</li>
<li>Exercise Physiology
</li>
<li>Manufacturing & Quality Control
</li>
</ul>
</li>
<li> Patents & Publications
<ul>
<li>Global Patenting Strategy
</li>
<li>Publications
</li>
</ul>
</li>
<li> Partnering
<ul>
<li>Enquiries - Product
</li>
<li>Enquiries - Business Partnering
</li>
</ul>
</li>
<li> About Us
<ul>
<li>Vision & Values
</li>
<li>Conventional v/s the Indus Discovery Model
</li>
</ul>
</li>
<li> Contact Us
</li>
<li> Careers
</li>
</ul>
</div>
</div>

Answer 1

check with this code
<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>HOME
<ul>
<li>Indus Advantage
</li>
<li>Positioning and flexibility of products
</li>
<li>Pipeline
</li>
</ul>
</li>
<li> Products
<ul>
<li>Overview
</li>
<li>Exercise Physiology
</li>
<li>Manufacturing & Quality Control
</li>
</ul>
</li>
<li> Patents & Publications
<ul>
<li>Global Patenting Strategy
</li>
<li>Publications
</li>
</ul>
</li>
<li> Partnering
<ul>
<li>Enquiries - Product
</li>
<li>Enquiries - Business Partnering
</li>
</ul>
</li>
<li> About Us
<ul>
<li>Vision & Values
</li>
<li>Conventional v/s the Indus Discovery Model
</li>
</ul>
</li>
<li> Contact Us
</li>
<li> Careers
</li>
</ul>
</ul>
</div>
</div>

Answer 2

you have to give the nav-center class 100%, now its at 975px or something like that, and it wrapps your list elements. so the 100% of the unordered list are relative to the nav-center element.
and if you want to get the nav menu centered giv the nav-centre class position:relative;
left: 50% and margin:left -511px. (margin-left should be have of the width of the unordered list)
i think the best solution would be that you put the dropdown menu out of the ul from the navi.
So its not relative to the other list.
markup your html like this:
<a class="toggleMenu" href="#">Menu</a>
<div class="nav-full">
<div class="nav-centre">
<ul class="nav">
<li>HOME</li>
<li> Products</li>
<li> Patents & Publications</li>
<li> Partnering</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Careers </li>
</ul>
<ul>
<li class="under">Indus Advantage</li>
<li class="under">Positioning and flexibility of products</li>
<li class="under">Pipeline
</ul>
<ul>
<li class="under">Overview</li>
<li class="under">Exercise Physiology</li>
<li class="under">Manufacturing & Quality Control</li>
</ul>
<ul>
<li class="under">Global Patenting Strategy</li>
<li class="under">Publications</li>
</ul>
<ul>
<li class="under">Enquiries - Product</li>
<li class="under">Enquiries - Business Partnering</li>
</ul>
<ul>
<li class="under">Vision & Values</li>
<li class="under">Conventional v/s the Indus Discovery Model</li>
</ul>
</div>
</div>
you now just have to give li.under position:absolute and the rest, how to style, should be clear.