title: CSS Dropdown 3rd level Menu Issue
body: <p>I have an issue in displaying the 3rd level in a dropdown menu. The 3rd level is not aligning properly with their 2nd level parent. If you click on any parent the third level starts at top.
  Offcourse it may be because of absolute posistioning and having top:0. I tried to change the positioning to relative but the parent menu item in focus expands. Changing value for Top attribute also doesnt help. I am unable to find a alternate css which is as simple as that the one I found.</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div id="menu"&gt;
  &lt;ul id="menu"&gt;
      &lt;li&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;Test-L1&lt;/span&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;span&gt;Test-L2A&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span&gt;Test-L2B&lt;/span&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;span&gt;Test-L3A&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Test-L3B&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;span&gt;Test-L2C&lt;/span&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;span&gt;Test-L3C&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span&gt;Test-L3D&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {
       list-style:none;
       margin:0;
       padding:0;
       font-size:1em;
       cursor:pointer;
    }
  #menu{
       margin:3px;
  }
  
  #menu &gt; li{            /* Top Level */
      float:left;
      margin-right:3px;
  }
  #menu &gt; li &gt; span{
      display:block;
      background:#55aa7f;
      padding:3px 10px;
  }
  #menu &gt; li:hover &gt; span{
      color:#fff;
  }
  
  #menu &gt; li &gt; ul{        /* Second Level */
      display:none;
      background:#55aa7f;
  }
  #menu &gt; li:hover &gt; ul{
      display:block;
      position:absolute;
  }
  #menu &gt; li &gt; ul &gt; li &gt; span{
      display:block;
      padding:3px 10px;
      border-top:solid 3px #fff;
  }
  #menu &gt; li &gt; ul &gt; li:hover &gt; span{
      color:#fff;
  }
  
  #menu &gt; li &gt; ul li &gt; ul{   /* Third Level &amp; beyond */
      display:none;
      background:#55aa7f;
  }
  #menu &gt; li &gt; ul li:hover &gt; ul{
      display:block;
      position:absolute;
      left:100%;
      border-left:solid 3px #fff;
      top:0;
      width:auto;
  }
  #menu &gt; li &gt; ul &gt; li ul &gt; li{
      display:block;
      padding:3px 10px;
      border-top:solid 3px #fff;
      white-space:nowrap;
  }
  #menu &gt; li &gt; ul &gt; li ul &gt; li:hover &gt; span{
      color:#fff;
  }
  </code></pre>
  
  <p>Jsfiddle
  <a href="http://jsfiddle.net/85sZy/" rel="nofollow">http://jsfiddle.net/85sZy/</a></p>
  
  <p>I have tried in IE9 and Chrome v29. If it is not possible to achieve the result with the above css, please provide me a alternate css which will serve the purpose.Still I prefer corrected version of above css.</p>