title: How to apply css to only one level of list items (not to child elements)
body: <p>In the code below, I'm adding a down array (via generated content) to the top level elements that have child menus. And I'm adding a right arrow to the submenu elements that have child menus.</p>
  
  <p>However, I need some help with my css, because it applies the arrows to all child elements if the parent has children. I only need it to be applied to those elements that have children.</p>
  
  <pre><code>&lt;ul id="menu-site-menu"&gt;
      &lt;li class="hasChild top"&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Our Charity Partners&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="hasChild top"&gt;&lt;a href="#"&gt;Buy Apparel&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li class="hasChild sub"&gt;&lt;a href="#"&gt;Benevolent Elephant&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Benevolent Elephant Short Sleeve&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Benevolent Elephant Long Sleeve&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="hasChild sub"&gt;&lt;a href="#"&gt;Eagle-Spirit&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Eagle-Spirit Short Sleeve&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Eagle-Spirit Long Sleeve T-Shirts&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Customer Service&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The css is below</p>
  
  <pre><code>.hasChild.top a:after {
      content: ' ';
      height: 0;
      position: absolute;
      bottom:-5px;
      right:-5px;
      width:0;
      border: 5px solid transparent;
      border-top-color: #ccc;
  }
  .hasChild.sub a:after {
      content: ' ';
      height: 0;
      position: absolute;
      bottom:0;
      right:-5px;
      width:0;
      border: 5px solid transparent;
      border-left-color: #ccc;
  }
  </code></pre>