title: creating a three level css accordion menu
body: <p>I have created a two level CSS accordion menu <a href="http://plnkr.co/edit/kqGokUqU0IJW1zwUNxJe?p=preview" rel="nofollow">see here</a>. I am now trying to make an attempt to create a third level. I have slightly myself with the css nesting of the layer. The example below is how I assume it should be. Does anyone know the correct nesting method.</p>
  
  <pre><code>#main-nav li ul a:hover:before, .subMenu li ul a:hover:before {
      content: "";
      display: block;
      width: 1em;
      height: 1em;
      background: rgba(0,0,0,0.75);
      border: 1px solid #FFF;
      position: absolute;
      top: 0.5em;
      left: -0.75em;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  </code></pre>