title: Drop down width same as parent
body: <p>I'm creating a drop down menu, the top level list item will display a username.</p>
  
  <p>I have a bit of an issue because I want the dropdown menu to be the same width at the top level list item being hovered over. </p>
  
  <p>However, if I set <code>ul</code> <code>li</code> <code>ul</code> <code>li</code> to width 100%, it takes 100% of the overall container, not of the <code>ul</code> above it. I think because <code>ul</code> <code>ul</code>'s are position absolute?</p>
  
  <p>Any ideas how I can make the drop down menu's the same width as the parent list item?</p>
  
  <p><a href="http://b9media.co.uk/tbw/admin.php" rel="noreferrer">The page can be seen here.</a></p>
  
  <p>and here's the HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span aria-hidden="true" data-icon="a"&gt; A long name here&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;View Profile&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Edit Profile&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;My Payments&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;a href=""&gt; &lt;span aria-hidden="true" data-icon="c"&gt; Online&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt; Log Out&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.head-link ul ul {
      display: none;
  }
  
  .head-link ul li:hover &gt; ul {
      display: block;
  }
  
  .head-link ul {  
      list-style: none;
      position: relative;
      display: inline-table;
  }
  
      .head-link ul li {
      float: left;
      border-top-left-radius: 0.5em;
      border-top-right-radius: 0.5em;
      height: 2em;
      width: auto;
      padding: 0.5em 0.98em;
  }
  
  .head-link ul li:hover {
      background: #ffffff;
  }
  
  .head-link ul li:hover a {
      color: #434343;
      border-bottom: none;
  }
  
  .head-link ul li a {
      display: block; 
      color: #ffffff; 
      text-decoration: none;
  }
  
  .head-link ul ul {
      background: #ffffff; 
      border-radius: 0px; 
      padding: 0;
      position: absolute; 
      top: 99%;
      left: 0;
      text-align: left;
      border-bottom-left-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
      padding-bottom: 0.8em;
      padding-top: 0.5em;
      box-shadow: 0px 0.3em 0.4em rgba(0,0,0,0.3);
  }
  
  .head-link ul ul li {
      float: none; 
      position: relative;
      padding: 0em;
  }
  
  .head-link ul ul li a {
      padding: 0.5em 1.24em;
      color: #434343;
      border-bottom-left-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
  }   
  
  .head-link ul ul li a:hover {
      background: #ffffff;
      text-decoration: underline;
  }
  
  .head-link ul ul ul {
      position: absolute; 
      left: 100%; 
      top:0;
  }
  </code></pre>