title: Make dropdown child 100% of container
body: <p>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.</p>
  
  <p>Please take a look at <a href="http://jsfiddle.net/pnwd72d1/8/" rel="nofollow">Jsfiddle Demo</a></p>
  
  <pre><code>&lt;div id="navcontainer"&gt;
      &lt;ul&gt;
  
          &lt;li style="display: inline;float: left;"&gt;
              &lt;a href="#"&gt;Filters&lt;/a&gt;
  
              &lt;ul style="text-align:left"&gt;
                  &lt;li&gt;&lt;a href=""&gt;Brand&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href=""&gt;Model&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href=""&gt;Color&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href=""&gt;Features&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li style="display: inline;float: right;"&gt;
              &lt;a href="#"&gt;Sort by&lt;/a&gt;
  
              &lt;ul style="text-align:right"&gt;
                  &lt;li&gt;&lt;a href=""&gt;Newest&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href=""&gt;Oldest&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href=""&gt;Cheapest&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>