title: pure css vertical menu with submenu
body: <p>I did my research and was able to replicate what I'm looking for, well kind of--I just need help with a more specific vertical, pure CSS, menu.</p>
  
  <p>I want my sub-menu popup to appear 10px to the left of the a not the <code>li</code>  attribute like most example found on the internet. I'm also looking for the most simple, pure CSS, type of menu--Nothing fancy.</p>
  
  <p>Here's what I've done so far:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul class="top-level"&gt;
          &lt;li&gt;&lt;a href="#"&gt;This is a long text&lt;/a&gt;
              &lt;ul class="sub-level"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact me here&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;
              &lt;ul class="sub-level"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub Menu Item 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>my css:</p>
  
  <pre><code>#nav {border:1px solid cyan;}
      /* top level menu */
      #nav ul.top-level {border:1px solid red;}
      #nav ul.top-level li {position:relative;}
  
      /* sub level menu */
      #nav ul.sub-level {border:1px solid yellow;}
      #nav ul.sub-level {display:none;} /* hide */
  
      /* hover the sub menu*/
      #nav ul.top-level li:hover .sub-level {display: block; position:absolute; top:5px;}
  </code></pre>
  
  <p>How do I make it so the sub level menu pops up when I hover the <code>a</code> HTML anchor, not the <code>li</code>, and 10px to the left of the clicked <code>a</code> anchor?
  Thanks.</p>