Apply custom css, based on 'if' any children (subnav) present
Hi all, I am new to jQuery, in learning process..
described below is my dilemma:
I have a 'main' navigation, that display a dropdown / sub navigation where necessary.
I'm trying to achieve the following -
1) considering the parent tab has no associated page, I want to ..
a) disable the 'click' through
b) add custom css property 'cursor:default' to parent tab, containing a 'ul' element (which is in fact, the dropdown menu)
Problem?
With the code pasted below, i've successfully achieved the custom css.. problem -
not working as intended.
a) custom css styling, is being applied to 'all' anchor elements in top navigation
b) custom css styling also being applied to 'children' anchor elements
- /*MAIN NAV, APPLY CUSTOM
- CSS BASED ON 'IF' ANY CHILDREN (SUBNAV) PRESENT*/
- $("ul.nav.top li a").hover(function() {
- if ($(this).has('ul.dropdown')) {
- $(this).css("cursor", "default");
- }
- //revert to standard 'pointer' for child anchor elements
- $("ul.dropdown li a").css("cursor", "pointer");
- });