title: Building a vertical, nested CSS menu that works in IE7
body: <p>Using just CSS (and JS to apply :hover styles), what's the best way to build horizontal dropdown nested menus?</p>
  
  <p>I'm trying to adopt the menus <a href="http://meyerweb.com/eric/css/edge/menus/demo.html" rel="nofollow noreferrer">here</a>, but I can't achieve the positioning I want. Every time I attempt this, I wind up with so much CSS cludge that it's no longer manageable.</p>
  
  <p>DOM:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Heading 1&lt;/a&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;
                 &lt;ul&gt;&lt;li&gt;a&lt;/li&gt;&lt;li&gt;b&lt;/li&gt;&lt;/ul&gt;
           &lt;/li&gt;
           &lt;li&gt;2&lt;/li&gt;&lt;li&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Heading 2&lt;/a&gt;
          &lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&lt;li&gt;3&lt;/li&gt;&lt;/ul&gt;
      &lt;/li&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Desired output:</p>
  
  <p><img src="https://i.stack.imgur.com/cmBlR.png" alt="alt text"></p>
  
  <p>That is, the top header is entirely horizontal, the first menu beneath each header lines up horizontally on the left of the header, and all further submenus line up horizontally on the right and vertically on the top. How would I go about building this basic idea?</p>