Make dropdown child 100% of container - html

Question

I have a dropdown inside a black container of 600px and i would like to have the red childrens show in a width of 100% of container instead of 100% of page width as it happens now. I need this to be in % because the website is responsive.
Please take a look at Jsfiddle Demo
<div id="navcontainer">
<ul>
<li style="display: inline;float: left;">
Filters
<ul style="text-align:left">
<li>Brand</li>
<li>Model</li>
<li>Color</li>
<li>Features</li>
</ul>
</li>
<li style="display: inline;float: right;">
Sort by
<ul style="text-align:right">
<li>Newest</li>
<li>Oldest</li>
<li>Cheapest</li>
</ul>
</li>
</ul>
</div>

Answer 1

add position:relative; for - #navcontainer ul
#navcontainer {
background:#222;
margin: 0 auto;
width: 600px;
}
#navcontainer ul {
text-align:center;
margin:0;
padding:0;
list-style:none;
width:100%;
position:relative;
}
#navcontainer ul li {
display:inline;
/*position:relative;*/
}
#navcontainer ul li a {
display:inline-block;
color:#fff;
font-size:20px;
padding:20px 30px;
}
#navcontainer ul li a:hover {
background:#999;
}
#navcontainer ul ul {
position:absolute;
left:0;
top:100%;
z-index:10;
width:100%;
display:none;
background:red;
}
#navcontainer ul ul li {
float:none;
}
#navcontainer ul ul li a {
text-align:left;
}
#navcontainer ul li:hover ul {
display:block;
}
<div id="navcontainer">
<ul>
<li>
Eggs
<ul>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
</ul>
</li>
</ul>
</div>

Answer 2

you can use position attribute for many diffrent uses but there you need to hava a contained sub menu and you cant use position:absolute; for parent element
you can use it for child elements and here you do it for both of theme .
change this line to solve your problem .
#navcontainer ul ul {
position:relative;
}
sorry for my bad language skils .

Answer 3

The above description and view the demo you away into a problem solved
You should add the parent element the following characteristics :
#navcontainer {
background: rgb(34, 34, 34) none repeat scroll 0 0;
border: 1px solid;
height: 65px;
margin: 0 auto;
position: relative;
text-align: center;
width: 600px;
}