Question

I have a menu that when you mouse over then the submenu appears. but I want the prevent the #research link being clicked so I used the jquery below. But this prevents my ‘My Aplication’ link being clicked too. Can someone help me out?

JQUERY

$('#research a').click(function(e){
e.preventDefault();
});

HTML

<li id="research"><a href="#">Research</a>
    <div class="submenu" style="display:none">
    <div class="submenuLeft">
        <ul>
            <li class="title">Application</li>
            <li><a href="/research/application">My Application</a></li>
        </ul>
    </div><!--submenuLeft-->
    </div><!--submenu-->
</li>

Answer 1

Try with

$('#research > a').click(function(e){
  e.preventDefault();
});

The > is preferred to ensure that the a is a direct descendent of the li#research.

The first() is already mentioned by @algorhythm.

Changing that slightly to below snippet will be more faster in execution.

$('#research a:first-child').click(function(e){
    e.preventDefault();
});