<!--
    ADDING DATA
	• ["data-style-id"] attribute to the ID of the category being searched
	• ["data-style-name"] attribute to the value being searched (should be the same as the text inside the <a>)
	• ["data-mood-id"] & ["data-mood-name"] same as above but set onthe 2nd level <ul> items
-->

<li>
    <a data-style-id="5" data-style-name="Grace" data-label="" class="hasSubMenu" href="/">Ambient / New Age</a>
    <ul data-level="2">
        <li><a data-mood-id="11" data-mood-name="happy" href="/">happy</a></li>
        <li><a data-mood-id="11" data-mood-name="happy" href="/">happy</a></li>
        <li><a data-mood-id="11" data-mood-name="happy" href="/">happy</a></li>
    </ul>
</li>


<!--
    PLACEHOLDERS - if the value of the "dropdowns" should appear differently than the selected option, there's an optional
    placeholder data attribute. Example below.
-->

<li>
    <a data-placeholder="PLACEHOLDER1" data-style-id="5" data-style-name="Grace" data-label="" class="hasSubMenu" href="/">Ambient / New Age</a>
    <ul data-level="2">
        <li><a data-placeholder="PLACEHOLDER2" data-mood-id="11" data-mood-name="happy" href="/">happy</a></li>
        <li><a data-placeholder="PLACEHOLDER3" data-mood-id="11" data-mood-name="happy" href="/">happy</a></li>
        <li><a data-placeholder="PLACEHOLDER4" data-mood-id="11" data-mood-name="happy" href="/">happy</a></li>
    </ul>
</li>