Disable link in dropdown menu but keep the css

Question

I have the following menu on jsfiddle : http://jsfiddle.net/aL7Xe/1000/

I disabled the "Bewerkingen" link with :

 a[href="/test4/disabled"] {
      pointer-events: none;

}

because its a dropdown menu, but when I use that code my css seems to dissapear, how can I fix this? or what code should I use to disable that link but still have my dropdown menu and css on it ? I am using Drupal so using # in the link is not going to work

Thanks in advance for any help :)

Answer 1

I'm able to figure about one way, that's by using js.

HTML

<a href="/test4/disabled" class="disable-link">Bewerkingen</a>

JS

$('.disable-link').on('click', function(e) {
   e.preventDefault();
});

I will upadte soon if I got some way to do with css

The other solution with css below, You don't need js now.

.disable-link {
  pointer-events: none;
  cursor: default;
 }

Answer 2

Try this :

<a href='#'>Bewerkingen</a>

You will not need to use

a[href="/test4/disabled"] {
      pointer-events: none;

}