 <p>Fundamentally, your <code>&lt;ul&gt;</code> element is being padded to the left there, and nested <code>&lt;ul&gt;</code>'s get increasingly more padded. With this setup, I can't imagine theres a "one line solution" available.</p> <p>Instead, one, I would change that <code>padding-left</code> to exist on the <code>&lt;li&gt;</code> element itself. This will solve one problem (you'll notice your top level items will have their hover state appearing to be full width), but we still have one more change, and it may be significant.</p> <p>Update: Rather than appending class names to your list elements, I've updated the code to simply use descendent child selectors. This will allow you to use the same markup but generate the same affect.</p> <p><a href="http://jsfiddle.net/2hrtc/2/" rel="nofollow">Here's an example which solves the problem</a>.</p> <p>I've also made a couple simple updates. For one, you shouldn't need that <code>height: 14px</code> on each image, you can state that with CSS. Secondly, you probably will want to use <code>1em</code> rather than 14px, assuming your font size in the <code>&lt;li&gt;</code> is also 14px, as it will tie that icon size to the font size of the container. Easier maintainability.</p> <p>Additionally, commit to a kind of quote! You're using single quotes and double quotes - stick to one! I prefer double quotes as that was the legacy of XHTML.</p> <p>And finally, you should put that space <em>before</em> the span, rather than inside it. It makes a little more syntactical sense.</p> <p>Oh, and if you're using HTML5, there's no need for the self closing tag. HTML5 already knows how an <code>&lt;image&gt;</code> tag should work.</p>