title: child div overlapping, not respecting parent div width
body: <p>I'm building a prototype for a Web Application and I have a problem with div overlapping.</p>
  
  <p>I have a div called <code>#menu</code>, with <code>width: 15%;</code>, and inside of it, I have a child div called <code>#list</code> with <code>width: 100%;</code>. </p>
  
  <p><a href="https://i.stack.imgur.com/yQtAB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yQtAB.png" alt="enter image description here"></a></p>
  
  <p>At a first glance, it seems that the <strong>child</strong> div is not respecting the limit of the <strong>parent</strong> div, remembering that the <strong>child</strong> div has <code>position: absolute;</code>. </p>
  
  <p>There a some questions about this subject, but I didn't found any question that suits to my case. Some of the questions talks about applying <code>clear: both</code> on all divs or to apply <code>display: inline-block;</code>, but nothing worked.</p>
  
  <p>Any help would be much appreciated.</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
  
      &lt;title&gt; PROTOTYPE - opcion.html&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
  
        body {
          margin: 0;
        }
  
        #menu {
          display: block;
          height: 100%;
          width: 15%;
          background-color:#ff0000;
        }
  
        #list {
          width: 100%;
          top: 180px;
          position: absolute;
        }
  
        ul {
          background-color: aqua;
          display: block;
          padding: 0;
          list-style: none;
        }
  
        li {
          margin: auto;
          width: 100%;
          padding: 10px 0px 10px 10px;
          border-bottom: 1px solid rgba(0,0,0,.6);
        }
  
        li a {
          color: #ffffff;
          font-size: 25px;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
          text-decoration: none;
        }
  
      &lt;/style&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div id="menu"&gt;
        &lt;div id="list"&gt;
          &lt;ul&gt;
            &lt;li&gt; &lt;a href="#"&gt;Customers&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#"&gt;Students&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#"&gt;Teachers&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a href="#"&gt;Android App&lt;/a&gt; &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>