title: Drupal: How to add custom class to child <ul> in main menu tree
body: <p>I searched and found an exact question at <a href="https://drupal.org/node/1178784" rel="nofollow">https://drupal.org/node/1178784</a> but the answer there does not work.</p>
  
  <p>I am using Drupal 7 to build a website. Inside, I have a main menu which may / may not have another menu. I want the parent main menu has different class than the children menu.</p>
  
  <p>Basically, this is the HTML I have now:</p>
  
  <pre><code>&lt;ul class='menu'&gt;
   &lt;li&gt;
    &lt;a&gt;first&lt;/a&gt;
    &lt;ul class='menu'&gt;
     &lt;li&gt;
      &lt;a&gt;sub-item&lt;/a&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and I want to make it like this:</p>
  
  <pre><code>&lt;ul class='menu'&gt;
   &lt;li&gt;
    &lt;a&gt;first&lt;/a&gt;
    &lt;ul class='sub'&gt;
     &lt;li&gt;
      &lt;a&gt;sub-item&lt;/a&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>In drupal there is a function theme_menu_tree to change the class inside <code>&lt;ul&gt;</code>, but that function will change ALL <code>&lt;ul&gt;</code> (both the root parent <code>&lt;ul&gt;</code> and all children <code>&lt;ul&gt;</code>).
  There is also a function theme_menu_link which can add class to <code>&lt;li&gt;</code> elements but that is not an option in my case.</p>
  
  <p>If you want to know why I need to change the children <code>&lt;ul&gt;</code> class, it is because I want to implement this: <a href="http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/" rel="nofollow">http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/</a>. That responsive multi level menu requires the children <code>&lt;ul&gt;</code> to have different class than its root parent.</p>
  
  <p>I have looked everywhere and still has not found any solution.
  Any help would be much appreciated.</p>