title: How to change <li> to variable width on css dropdown submenu
body: <p>I have a fixed width css dropdown menu and would like the slideout submenu to be variable width based on width of the text in the 'li'.</p>
  
  <p><img src="https://i.stack.imgur.com/ZvjqC.jpg" alt="variable width"></p>
  
  <p>I tried this:
  <a href="https://stackoverflow.com/questions/8824232/make-all-li-same-width-as-the-widest">Make all &lt;li&gt; same width as the widest</a>
  but didn't work. All the examples I googled, talk about using float:left;width:100%;position:relative but everywhere I inserted it nothing changed.</p>
  
  <p>Link to code: <a href="http://jsfiddle.net/Bqh9a/1/" rel="nofollow noreferrer">http://jsfiddle.net/Bqh9a/1/</a></p>
  
  <p>My CSS is:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .pipe {margin-top:4px;}
  .li_hover {color: #002398;}
  .bottom_li {margin-bottom:6px;margin-top:2px;}
  ul#nav li .bottom_li:hover &gt; a{background:#E0E0E0;}
  ul#nav, ul#nav ul {width:300px;list-style:none;margin:0;padding:0;position:absolute;z-index:9;border:1px solid #297BCE;}
  ul#nav li li:hover &gt; a{border:none;}
  ul#nav li {position:relative;float:left;zoom:1; /*Needed for IE*/}
  ul#nav li:hover &gt; a{background:#E0E0E0;color:#297BCE;border-left:1px solid #297BCE;border-right:1px solid #297BCE;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;text-decoration:underline;}
  ul#nav li:hover &gt; ul{display:block;}
  ul#nav li a{border:1px solid #FFFFFF;display:block;padding:4px 6px 4px 6px;color:#297BCE;font-weight:bold;font-family:Arial, Times New Roman, Tahoma;font-size:13px;text-decoration:none;}
  ul#nav ul {padding-left:8px;padding-top:2px;display:none;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;left:0;border-top:none;}
  ul#nav ul li{background:#E0E0E0;color:#000;border:none;float:none;}
  ul#nav ul li a{border:none;width:100%;padding:0;display:block;color:#000000;line-height:145%;font-size:12px;font-weight:normal;} 
  ul#nav ul li a:hover{border:none;width:150px;color:#297BCE;&gt;}
  ul#nav ul ul{position: absolute;top: 0;left: 100%;margin-left:-3px;display: none;}
  ul#nav ul ul{padding-left:8px;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;}
  ul#nav ul li:hover ul{display: block;}
  &lt;/style&gt;
  </code></pre>
  
  <p>My HTML is:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
   &lt;li&gt;&lt;a href="/ueber_uns.htm"&gt;About Us&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Our Goals&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Our Team&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Press&lt;/a&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;2006&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2007&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2008&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Impressum&lt;/a&gt;&lt;/li&gt;
     &lt;li class="bottom_li"&gt;&lt;a href="#"&gt;&lt;span class="li_hover"&gt;See all&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
  &lt;li class="pipe"&gt;|&lt;/li&gt;
   &lt;li&gt;&lt;a href="/ueber_uns.htm"&gt;About Us&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Our Goals&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Our Team&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Press&lt;/a&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;2006&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2007&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2008&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Impressum&lt;/a&gt;&lt;/li&gt;
     &lt;li class="bottom_li"&gt;&lt;a href="#"&gt;&lt;span class="li_hover"&gt;See all&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
  &lt;li class="pipe"&gt;|&lt;/li&gt;
   &lt;li&gt;&lt;a href="/ueber_uns.htm"&gt;About Us&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Our Goals&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Our Team&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Press&lt;/a&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;2006&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2007&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2008&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Impressum&lt;/a&gt;&lt;/li&gt;
     &lt;li class="bottom_li"&gt;&lt;a href="#"&gt;&lt;span class="li_hover"&gt;See all&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks for any advice in guiding me in the right direction.</p>