Your current code will remove the link from the 3rd <li>
selected from all of the <li>
s (both parent and children) in the list because you are using the CSS descendent selector.
The ul#nav li
will find every single <li>
. Since you just want to remove the link default action from the first level (CSS children) then you can use the CSS child selector.
To remove the action from the top level parent <li>
$('ul#nav > li > a').click(function(e){
e.preventDefault();
});
Edit: Still using the child selector, this will only select the About Us
link
$('ul#nav > li:eq(2) > a')
Edit2: I was not entirely happy with needing multiple eq()
selectors so how about using native CSS nth-child
to select a range instead? This will be quicker in browsers that support nth-child
natively.
Handy test page for this - http://nthmaster.com/
This should also just colour red (for demo purposes) Our Projects
and About Us
with the following code.
CSS
$('#nav > li:nth-child(n+2):nth-child(-n+3) > a').css({color: 'red'})
HTML
<ul id="nav">
li class=""><a href="home.htm">Home</a></li>
<li class="nav_parent"><a href="our-projects.htm">Our Projects</a>
<ul class="nav_child">
<li class=""><a href="the-palms-at-corozal.htm">The Palms At Corozal</a></li>
<li class=""><a href="the-lakes-at-consejo.htm">The Lakes At Consejo</a></li>
</ul>
</li>
<li class="nav_parent"><a href="about-us.htm">About Us</a>
<ul class="nav_child">
<li class=""><a href="who-we-are.htm">Who We Are</a></li>
<li class=""><a href="other-projects.htm">Other Projects</a></li>
<li class=""><a href="partners.htm">Partners</a></li>
</ul>
</li>
<li class="nav_parent"><a href="about-belize.htm">About Belize</a>
<ul class="nav_child">
<li class=""><a href="general-info.htm">General Info</a></li>
<li class=""><a href="investing-in-belize.htm">Investing In Belize</a></li>
<li class=""><a href="useful-links.htm">Useful Links</a></li>
</ul>
</li>
<li class=""><a href="news.htm">News Articles</a></li>
<li class=""><a href="contact-us.htm">Contact Us</a></li>
</ul>