Question

I know it’s the javascript causing the issue, but how I have no idea. When I rollover the link it shows as if it’s clickable but won’t click through. I’m not using any z-index in my css either. And I tried to set that but it didn’t make a difference. Is there something in this js that’s a possible cause?

$(function(){
$('li.an_item').css('pointer','default').css('list-style-image','none');
$('li.an_item:has(ul)').click(function(event){
        if (this == event.target) {
            $(this).css('list-style-image',
                (!$(this).children().is(':hidden')) ? 'url(/wp-content/themes/theme/images/arrow_sideways.png)' : 'url(/wp-content/themes/theme/images/arrow_down.png)');
            $(this).children().toggle('slow');
        }
        return false;
    })
    .css({cursor:'pointer', 'list-style-image':'url(/wp-content/themes/theme/images/arrow_sideways.png)'})
    .children().hide();
$('li:not(:has(ul))').css({cursor:'default', 'list-style-image':'none'});
});

Answer 1

Get rid of return false;.

return false; is equivalent to:

event.preventDefault();
event.stopPropagation();

preventDefault stops your link from acting like a link, which is why it doesn’t work.