title: Make all <li> same width as the widest
body: <p>I've got this menu wich is setup inline and has dropdowns.<br>
  The inner <code>ul</code> has a background.<br>
  Each dropdown <code>li</code> has a <code>:hover</code> that changes the background of the <code>li</code>:</p>
  
  <pre><code>&lt;div id="navMain"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#nogo"&gt;Forside&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#nogo"&gt;1111111111111&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#nogo"&gt;Link 1-2&lt;/a&gt;&lt;/li&gt;
                  &lt;!-- etc. --&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#nogo"&gt;Om Os&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#nogo"&gt;Link 2-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#nogo"&gt;Link 2-2&lt;/a&gt;&lt;/li&gt;
                  &lt;!-- etc. --&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#nogo"&gt;Link 3&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#nogo"&gt;Link 3-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#nogo"&gt;Link 3-2&lt;/a&gt;&lt;/li&gt;
                  &lt;!-- etc. --&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Problem is, that when one of the submenu <code>li</code> is longer than the others, it will only expand itself, and not the other <code>li</code> ofcourse.<br>
  This results in the <code>:hover</code> effect having different lengths.</p>
  
  <p>So how would i make all <code>li</code> in each inner <code>ul</code> the same size as the widest one?</p>
  
  <p><a href="http://forevertan.dk/_temp/eventfest/3/menu.css" rel="noreferrer">Here you can find the CSS</a> if needed.</p>