I am trying to build a nice class heirarchy for a nested list menu using the following html:
<div> <ul> <li> <ul> <li> <ul> <li></li> </ul> </li> </ul> </li> </ul> </div> Using this function: $(function(){ $('div > ul').addClass('primary'); $('div ul.primary li > ul').addClass('secondary'); $('div ul.secondary li > ul').addClass('tertiary'); }); I would like to end up with: <div> <ul class="primary"> <li> <ul class="secondary"> <li> <ul class="tertiary"> <li></li> </ul> </li> </ul> </li> </ul> </div> But instead, I end up with the 3rd level <ul> having the classes 'secondary' and 'tertiary', eg: <div> <ul class="primary"> <li> <ul class="secondary"> <li> <ul class="secondary tertiary"> <li></li> </ul> </li> </ul> </li> </ul> </div> Can anyone please point out to me what I am doing wrong?