How to add .active class in to the menu item? I am developing a theme for Drupal 7 and I am struck up with the following issue. I can see there are fixes through jQuery. But I would like to do it in the Drupal way.

My current HTML

&lt;ul class="menu sf-js-enabled"&gt;
&lt;li class="first leaf"&gt;
    &lt;a href="/" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class="last expanded"&gt;
    &lt;a href="/node/57"&gt;About Us&lt;/a&gt;
        &lt;ul class="menu sf-js-enabled" style="display: none; visibility: hidden;"&gt;
            &lt;li class="first leaf"&gt;&lt;a href="/node/69"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
            &lt;li class="last leaf"&gt;&lt;a href="/node/73"&gt;Typhygraphy&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
&lt;/li&gt;




And I want something like this

&lt;ul class="menu sf-js-enabled"&gt;
&lt;li class="first leaf active"&gt;
    &lt;a href="/" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class="last expanded"&gt;
    &lt;a href="/node/57"&gt;About Us&lt;/a&gt;
        &lt;ul class="menu sf-js-enabled" style="display: none; visibility: hidden;"&gt;
            &lt;li class="first leaf"&gt;&lt;a href="/node/69"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
            &lt;li class="last leaf"&gt;&lt;a href="/node/73"&gt;Typhygraphy&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
&lt;/li&gt;




The "active" class needs to be there in the &lt;li&gt; also.
You can achieve your goal without jQuery. Just use theme_menu_link() function, or (my suggestion) theme_menu_link__your_menu()

Place this function in your template.php file:

function YOURTHEME_menu_link(array $variables) {
    $element = $variables['element'];
    $sub_menu = '';

    if ($element['#below']) {
        $sub_menu = drupal_render($element['#below']);
    }
    $output = l($element['#title'], $element['#href'], $element['#localized_options']);

    // if link class is active, make li class as active too
    if(strpos($output,"active")&gt;0){
        $element['#attributes']['class'][] = "active";
    }
    return '&lt;li' . drupal_attributes($element['#attributes']) . '&gt;' . $output . $sub_menu . "&lt;/li&gt;\n";
}


You can use this function only for menus displayed as a block. 
If you're theming main menu:


go to admin/appearance/settings/yourtheme and turn the main menu off.
go to admin/structure/block and place main menu block in header region
customize ul with theme_menu_tree() and li elements with theme_menu_link()