title: <ul> inside <li> changes <li> width
body: <p>I have a menu which is a <code>&lt;ul&gt;</code>. Inside one of the <code>&lt;li&gt;</code>s I have another <code>&lt;ul&gt;</code> to add a depth level, a sub-menu. However, when hovering the <code>&lt;li&gt;</code> to make the sub-menu appear, it's width changes to match the <code>&lt;ul&gt;</code>s. Also, the sub-menu will pull the content area down, and that's not what I want.</p>
  
  <p>I want the <code>&lt;li&gt;</code> to maintain it's width when it's hovered, and the sub-menu to appear on top of the content area.</p>
  
  <p>Here's the jsFiddle: <a href="http://jsfiddle.net/Cthulhu/RWjcA/" rel="nofollow">http://jsfiddle.net/Cthulhu/RWjcA/</a> (If you hover Products, you will see it happen.)</p>