title: How do I keep dropdown menus the same width of top level categories with auto width
body: <p>I've got a navigation menu that is made of nested ul lists like this:   </p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li class="category top_level"&gt;
           &lt;a href="#" class="category_name top_level_link"&gt;top level 1&lt;/a&gt;
          &lt;ul class="dropdown"&gt;
              &lt;li class="item " &gt;
                  &lt;a href=""&gt;item 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="item "&gt;
                  &lt;a href=""&gt;very long name of item 2&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;   
      &lt;/li&gt;
      &lt;li class="category top_level"&gt;
          &lt;a href="#" class="category_name top_level_link"&gt;longer top level name 2&lt;/a&gt;
          &lt;ul class="dropdown"&gt;
              &lt;li class="item " &gt;
                  &lt;a href=""&gt;very long name of item 3&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="item "&gt;
                  &lt;a href=""&gt;item 4&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;   
      &lt;/li&gt;                  
  &lt;/ul&gt;  
  </code></pre>
  
  <p>Current css is: </p>
  
  <pre><code>    #menu ul{list-style-type:none;}
  #menu li.top_level{vertical-align:top;zoom:1;display:inline;margin:2px;padding:0 1px 0 0;}
  #menu .dropdown{float:none;z-index:100;position:absolute;width:180px;height:0;overflow:hidden;-webkit-transition:height 700ms;-moz-transition:height 700ms;}
  #menu .category:hover .dropdown,#menu .category:focus .dropdown{-webkit-transition:height 940ms;-moz-transition:height 940ms;}
  #menu .item a,#menu .category a,#menu .category a:visited,#menu .item a:visited{-webkit-transition:background-color 940ms;-moz-transition:background-color 940ms;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1em;text-decoration:none;display:block;font-family:ColaborateLightRegular;color:#555;padding:.6em;}
  #menu a.top_level_link{color:#555;background:none;padding:.4em .6em;}
  #menu .dropdown a{text-align:left;}
  #menu .item a:hover,#menu .category a:hover,#menu .item a:focus,#menu .category a:focus{text-decoration:none;-webkit-transition:all 0;-moz-transition:all 0;background:#d9d2d2;}
  #menu .selected a{background:#d4d2d2!important;}
  </code></pre>
  
  <p>The top level categories and the list different lengths.  I would like the dropdown items to the same width as the top level categories.  The top level categories have 'width: auto' in the css.  When the widths inherit to the dropdowns, they inherit width as 'auto' rather that inheriting the actual width of the top level.  How can I fix this?  Here's a picture of what I want versus what I have:</p>
  
  <p><img src="https://i.stack.imgur.com/Rxm5L.jpg" alt="example"></p>
  
  <p>What do I need to do?</p>