title: Dropdown Menus with Auto List-Item Widths
body: <p>So I'm working on a drop menu and I'd like each menu item to have an auto width. i.e. the background to expand to the width of the menu item rather than having an overall fixed width for all the UL. I thought that giving the ul li an auto width would sort it but it seems not. What am I missing?</p>
  
  <pre><code>&lt;ul id="nav"&gt;
  &lt;li&gt;&lt;a class="last" href="#"&gt;MENU &amp;#9660;&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Short&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Very Long&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>#nav { 
  height: 1; 
  list-style-type: none; 
  padding-top: 1.25em; 
  margin-top: 0em;
  }
  
  #nav li { 
  float: right; 
  position: relative; padding: 0;
  } 
  
  #nav li a { 
  display: block; 
  font-size: 14px; 
  padding: 0 1em;  
  margin-bottom: 1em; 
  color: #333; 
  text-decoration: none; 
  border-left: 1px solid #333; 
  }
  
  #nav .last, #nav li ul li a {
  border-left: none;
  }
  
  #nav li a:hover, #nav li a:focus {
  color: #666;
  }
  
  #nav li ul { 
  opacity: 0; 
  position: absolute; 
  right: 0em; 
  list-style-type: none; 
  padding: 0; margin: 0; 
  }
  
  #nav li:hover ul { 
  opacity: 1; 
  }
  
  #nav li ul li { 
  float: none; 
  position: static; 
  width: auto; 
  height: 0; 
  line-height: 0; 
  background: none; 
  text-align: right; 
  margin-bottom: .75em;
  }
  
  #nav li:hover ul li { 
  height: 25px; 
  line-height: 2.5em;
  }
  
  #nav li ul li a { 
  background: #222; 
  }
  
  #nav li ul li a:hover { 
  color: #666; 
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/8aK8Y.jpg" alt="Mockup"></p>