title: How do I force nested list items to be the same width as parent list item?
body: <p>I have a horizontal parent list. Some of the list items display a nested vertical list when clicked. How do I force the items in the vertical sub list to be the same width as the parent list item? </p>
  
  <p>See <a href="http://jsfiddle.net/BXnxc/1/" rel="noreferrer">jsFiddle</a>.</p>
  
  <p><img src="https://i.stack.imgur.com/n2tCL.png" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="mainMenu horizontalMenu bulletless fullWidth bold"&gt;
      &lt;li class="showSubMenu"&gt;
          &lt;div&gt;Resumes &amp;amp; Cover Letters &amp;#x25BE; &lt;/div&gt;
          &lt;ul class="mainSubMenu bulletless"&gt;
              &lt;li&gt;&lt;a&gt;Resumes&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;Cover Letters&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;Interviews&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;&lt;li&gt;&lt;a&gt;Other Link&lt;/a&gt;
      &lt;/li&gt;&lt;li&gt;&lt;a&gt;Other Link&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.horizontalMenu li{    
      display: inline-block;
  }
  .mainMenu &gt; li{
      border: 1px solid black;
  }
  .mainMenu a, .mainMenu div{
      display: block;
      padding: 10px 20px;
  
  }
  .mainSubMenu{
      position: absolute;
  }
  </code></pre>