title: Drupal 7 bootstrap dropdown menu
body: <p>I'm a newbie of Drupal. I'm trying to develop a bootstrap 3 template, but I have a problem with the navbar dropdown menu implementation. I followed these steps:</p>
  
  <p>in my mytheme/templates folder I create a page.tpl.php file with the following code:</p>
  
  <pre><code>if ($page['header'])
  ...
  $main_menu = variable_get('menu_main_links_source', 'main-menu');
  $tree = menu_tree($main_menu);
  print drupal_render($tree);
  ...
  </code></pre>
  
  <p>in mytheme folder I create a template.php  file with these functions:</p>
  
  <pre><code>function mytheme_menu_tree($variables) {
     return '&lt;ul class="nav navbar-nav"&gt;' . $variables['tree'] . '&lt;/ul&gt;';
  }
  
  function mytheme_menu_link(array $variables) {
    $element = $variables['element'];
    $sub_menu = '';
    $dropdown = '';
    if ($element['#below']) {
      $sub_menu = drupal_render($element['#below']);
      $dropdown = 'class="dropdown"';
      $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
    }
    $output = l($element['#title'], $element['#href'], $element['#localized_options']);
    return '&lt;li ' .$dropdown. ' &gt;' . $output . $sub_menu . "&lt;/li&gt;\n";
  }
  </code></pre>
  
  <p>with this code I'm at a good point, but I need to remove classes "nav navbar-nav" from children  and add the class "dropdown-menu". 
  This is the result of my code:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
  &lt;li&gt;&lt;a href="/drupal/node/1" class="active"&gt;XYZ&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/drupal/node/2" title=""&gt;ASD&lt;/a&gt;&lt;/li&gt;
  &lt;li class="dropdown"&gt;&lt;a href="/drupal/node/3" title="" class="dropdown-toggle"&gt;XXX&lt;/a&gt;
  &lt;ul class="nav navbar-nav"&gt;
  &lt;li&gt;...&lt;/li&gt;
  &lt;li&gt;...&lt;/li&gt;
  &lt;li&gt;...&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and this is what I would like to obtain:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
  &lt;li&gt;&lt;a href="/drupal/node/1" class="active"&gt;XYZ&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/drupal/node/2" title=""&gt;ASD&lt;/a&gt;&lt;/li&gt;
  &lt;li class="dropdown"&gt;&lt;a href="/drupal/node/3" title="" class="dropdown-toggle"&gt;XXX&lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt; &lt;!-- HERE IS THE DIFFERENCE --&gt;
  &lt;li&gt;...&lt;/li&gt;
  &lt;li&gt;...&lt;/li&gt;
  &lt;li&gt;...&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Maybe I can do something like this:</p>
  
  <pre><code>function mytheme_menu_tree($variables) {
     if ( [check if I'm at the first level] ) {
         return '&lt;ul class="nav navbar-nav"&gt;' . $variables['tree'] . '&lt;/ul&gt;';
     } else {
         return '&lt;ul class="dropdown-menu"&gt;' . $variables['tree'] . '&lt;/ul&gt;';
     }
  
  }
  </code></pre>
  
  <p>but I don't know how... Any idea?</p>