 <p>I took your fiddle and added a new CSS class "snug" to apply for the list of years. Basically "snug" will let the list be as wide as its widest list element. Check it out: <a href="http://jsfiddle.net/2fc3W/1/" rel="nofollow">http://jsfiddle.net/2fc3W/1/</a></p> <pre><code>// the CSS ul#nav ul.snug{ width: auto; } ul#nav ul.snug li a{ display: inline; padding-right: 6px; width: auto; } // the HTML snippet &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 class="snug"&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; ... </code></pre>