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.
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.
<ul id="menu-site-menu">
<li class="hasChild top"><a href="#">About Us</a>
<ul class="sub-menu">
<li><a href="#">Our Charity Partners</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</li>
<li class="hasChild top"><a href="#">Buy Apparel</a>
<ul class="sub-menu">
<li class="hasChild sub><a href="#">Benevolent Elephant</a>
<ul class="sub-menu">
<li><a href="#">Benevolent Elephant Short Sleeve</a></li>
<li><a href="#">Benevolent Elephant Long Sleeve</a></li>
</ul>
</li>
<li class="hasChild sub"><a href="#">Eagle-Spirit</a>
<ul class="sub-menu">
<li><a href="#">Eagle-Spirit Short Sleeve</a></li>
<li><a href="#">Eagle-Spirit Long Sleeve T-Shirts</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
.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;
}