How to link the parent of a Nice Menu to nowhere?

Question

In order to make a Nice Menu, I created a menu like this:

My Menu
   - First link
   - Second link
   - Third link

The menu works perfectly fine, but I also had to fill in a link for the 'My Menu' (I've set it to the frontpage). However, I'd like the parent link to be linked to nowhere. How can I do that?

This is the relevant code for the menu's parent:

<div id="block-nice-menus-2">
 <ul id="nice-menu-2">
  <li class="menu__item">
   <a class="menu__link menu__link" href="/mysite/">
    My Menu
   </a>
  </li>
 </ul>
</div>

---

Note: At first, I couldn't get the code from the accepted answer working, because I forgot to load my theme's MYTHEME.js file. After reading this, I learned that one can do that by adding scripts[] = MYTHEME.js to the MYTHEME.info file.

Answer 1

I already tried to suggest you something on your same question here: https://stackoverflow.com/questions/24431641/how-to-remove-a-link-but-keep-its-mouseover-effect/24447807#24447807

Edit: And I'm gonna write it down here as well.

I had to do this trick several times before. I just did a little javascript like :

$('MYLINKSELECTOR').click(function() {
    return false;
}).mouseover(function() {
    $(this).css('cursor', 'default');
}).attr('href', '#');

It will disable the destination href and set a default cursor but keep the hover effect.

Edit: I use this script in MYTHEME/js/scripts.js and to give you an example of a selector (I use Superfish, not Nice Menu), here is my full code:

Drupal.behaviors.pweMegaMenu = {
attach: function(context, settings) {
  // Parents links shouldn't be clickabled
  $('#menu-695-2 > a, #menu-695-2 li#menu-884-2 > a, #menu-695-2 li#menu-866-2 > a').click(function() {
    return false;
  }).mouseover(function() {
    $(this).css('cursor', 'default');
  }).attr('href', '#');
}

Answer 2

Yes you can do that using the Special menu items module:

Special menu items is a Drupal module that provides placeholder and separator menu items.

A placeholder is a menu item which is not a link. It is useful with dynamic drop down menus where we want to have a parent menu item which is not linking to a page but just acting as a parent grouping some menu items below it

Answer 3

Drupal.behaviors.MY_MODULE_NAME = {
  attach: function(context, settings) {

    $('#nice-menu-2 ' +
    'li > ' +
    'a:not(.MYSITE-processed)').attr('href', '#')
                                   .addClass('MYSITE-processed');

  }
};

Should do the trick for you.

If it doesn't then try javascript debugging with firebug. To understand more about behaviors, check Better understanding of Drupal behaviors.