How to add a div class to menu link?

Question

I would like to add a specific class to specific menu item, so that the menu item would show an image on hover.

Basically I want to implement this in a menu item link:

<div class="thumbnails">
<a href="#">Some_name<span><img src="http://www........jpg" alt="image1" height="30%" width="30%" /></span></a>
</div>

I have tried Menu Attributes module but I couldn't specified a class I wanted to add. Is there any other way how to do it please?

Answer 1

Menu CSS Names

This is a very simple module that takes the link text of each drupal menu item and adds it as a css class name to the menu's element. Using these class names, each menu item can be styled separately with css. This is also very useful for css sprite techniques.

There are no admin settings for this module, it starts doing its work once the module is enabled. All caches are automatically cleared at this time also. This module works with menus in blocks (including Primary Links) and menus in themes (menus that are enabled from the theme's configuration page).

Answer 2

You could use theme_menu_link():

function MY_THEME_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']);

  // Add a div wrapper to my special link.
  $prefix = '';
  $suffix = '';
  if ($element['#href'] == 'foo/bar') {
    $prefix = '<div class="thumbnails">';
    $suffix = '</div>';
  }

  return $prefix . '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>{$suffix}\n";
}

Answer 3

Try to clear your Drupal cache and check once. Further, you can check this link for your purpose.