title: CSS menu right aligned with markup: UL>LI>UL>LI
body: <p>A friend gave me this HTML and CSS:</p>
  
  <p><a href="http://jsfiddle.net/LGFYE/2/" rel="nofollow">http://jsfiddle.net/LGFYE/2/</a></p>
  
  <p>My job is to use it in a CMS, but that piece of code has several problems with the markup:</p>
  
  <ul>
  <li>BR after each LI inside the UL</li>
  <li>LI>SPAN with a pipe character only for the sake of design</li>
  <li>Order of sub pages are reverted</li>
  </ul>
  
  <p>My best try is this:</p>
  
  <p><a href="http://jsfiddle.net/MQLZh/1/" rel="nofollow">http://jsfiddle.net/MQLZh/1/</a></p>
  
  <p>But I too have a problem:</p>
  
  <ul>
  <li>Spacing to the right of sub menu isn't generic, it's always 100px</li>
  </ul>
  
  <p>I've been struggling for hours, and hope someone out there knows just the way. I would love to learn another CSS trick or two. Furthermore the final solution has to be "working" in IE7+. "working" as in "not broken", but not neccessarily identical or "design-perfect".</p>
  
  <p>I appreciate any effort, thanks!</p>