title: How to construct multilevel menu using CSS only?
body: <p>I have a problem in my CSS. I am creating a vertical menu but my problem is I don't know how to align the second level of categories, with the first. This is also a problem going from the second level to a third level; it also align to the parent level.</p>
  
  <p>My format is like this:</p>
  
  <pre><code>Parent 1
     - Second Level 1
        - Third Level 1
        - Third Level 2
        - Third Level 3
  Parent 2
     - Second Level 2
        - Third Level 1
        - Third Level 2
        - Third Level 3
  </code></pre>
  
  <p>Here's my desired output:</p>
  
  <p><img src="https://i.stack.imgur.com/iIht6.png" alt="enter image description here"></p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>#category-navigation ul ul { display: none }
  #category-navigation ul li:hover &gt; ul { 
      display: inline-block;
      position: absolute;
      background-color: #F5F5F5;
      border: 1px solid #CCC;
      top: 20px;
      left: 15%;
      z-index: 4;
      width: 30%;
      box-shadow: 5px 5px 5px #CCC;
  }
  
  #category-navigation ul.parent { 
      border-bottom: 1px solid #ccc; 
      padding: 7px 0px;
  }
  
  #category-navigation ul.parent li { 
     border-bottom: 1px solid #ccc; 
     padding: 7px 0px; 
  }
  </code></pre>
  
  <p>Here's the fiddle of my code:</p>
  
  <p><a href="http://jsfiddle.net/rochellecanale/4fh680uv/8/" rel="nofollow noreferrer">http://jsfiddle.net/rochellecanale/4fh680uv/8/</a></p>
  
  <p>How do I fix the alignment?</p>