title: CSS select sub-menu
body: <p>everybody!
  I'm creating a wordpress template for my own website and I need a dropdown multilevel menu. I've managed wordpress to output the first submenu level as "sub-menu" and the second as "sub-sub-menu". But I need to access each of the sub-sub-menus individually. I tried the :first-child or :nth-child(x), in following context:</p>
  
  <pre><code>.sub-sub-menu:nth-child(2) { /*selects both sub-sub-menus*/
      background: red;
  }
  .sub-sub-menu:nth-child(1) { /*doesnt work*/
      background: red;
  }
  </code></pre>
  
  <p>But neither one of them worked. Here is my wordpress-generated code: </p>
  
  <pre><code>&lt;section id="menu"&gt;
    &lt;div id="menu_container" class="menu-header_menu-container"&gt;
      &lt;ul id="menu-header_menu" class="menu"&gt;
        &lt;li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-26"&gt;
          &lt;a href="http://localhost/wordpress"&gt;
            Home
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-162"&gt;
          &lt;a href="http://localhost/wordpress/?page_id=136"&gt;
            Page 1
          &lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
            &lt;li id="menu-item-193" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-193"&gt;
              &lt;a href="http://localhost/wordpress/?page_id=192"&gt;
                subpage 1
              &lt;/a&gt;
              &lt;ul class="sub-sub-menu"&gt;
                &lt;li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200"&gt;
                  &lt;a href="http://localhost/wordpress/?page_id=196"&gt;
                    subsubpage1
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li id="menu-item-209" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-209"&gt;
                  &lt;a href="http://localhost/wordpress/?page_id=204"&gt;
                    subsubpage2
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188"&gt;
              &lt;a href="http://localhost/wordpress/?page_id=187"&gt;
                subapge2
              &lt;/a&gt;
              &lt;ul class="sub-sub-menu"&gt;
                &lt;li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-217"&gt;
                  &lt;a href="http://localhost/wordpress/?page_id=214"&gt;
                      subsubpage1
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"&gt;
          &lt;a href="http://localhost/wordpress/?page_id=138"&gt;
           Page 2
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"&gt;
          &lt;a href="http://localhost/wordpress/?page_id=167"&gt;
            Page 3
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"&gt;
          &lt;a href="http://localhost/wordpress/?page_id=171"&gt;
            Page 4
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Link to <a href="http://jsfiddle.net/W4g2h/" rel="nofollow">jsfiddle</a></p>