I've got a drop-lower menu which are dynamically added through WordPress. It appears such as this:

Pictures
    Sea
    Forest
    City

"Ocean", "Forest" and "City" is groups with "Pictures" as parent category.

My real question is:

How do you result in the "Pictures" category unclickable?

Used to do this with jQuery:

$(document).ready(function(){
    //Make parent links unclickable
    $(".page-item-3").click(function(){ 
    	return false;
    });
});

...which with CSS:

li.page-item-3 a {
    cursor:default;
}

.page-item-3 ul li a {
    cursor: pointer;
}

Markup appears like this:

<div id="menu" class="jqueryslidemenu">
    <ul>
    	<li class="cat-item cat-item-1 current_page_item"><a href="http://blabla" title="Blabla">Blabla</a></li>
    	<li class="page_item page-item-2"><a href="http://blabla" title="Blabla">Blabla</a>
    		<ul>
    			<li class="page_item page-item-28"><a href="http://blabla" title="Blabla">Blabla</a></li>
    			<li class="page_item page-item-30"><a href="http://blabla" title="Blabla">Blabla</a></li>
    			<li class="page_item page-item-39"><a href="http://blabla" title="Blabla">Blabla</a></li>
    		</ul>
    	</li>
    	<li class="page_item page-item-3"><a href="http://blabla" title="Blabla">Blabla</a>
    		<ul>
    			<li class="page_item page-item-5"><a href="http://blabla" title="Blabla 1">Blabla 1</a></li>
    			<li class="page_item page-item-7"><a href="http://blabla" title="Blabla 2">Blabla 2</a></li>
    			<li class="page_item page-item-9"><a href="http://blabla" title="Blabla 3">Blabla 3</a></li>
    			<li class="page_item page-item-11"><a href="http://blabla" title="Blabla 4">Blabla 4</a></li>
    			<li class="page_item page-item-13"><a href="http://blabla" title="Blabla 5">Blabla 5</a></li>
    		</ul>
    	</li>
    	<li class="page_item page-item-15"><a href="http://blabla" title="Blabla">Blabla</a>
    		<ul>
    			<li class="page_item page-item-222"><a href="http://blabla" title="Blabla">Blabla</a></li>
    			<li class="page_item page-item-224"><a href="http://blabla" title="Blabla">Blabla</a></li>
    			<li class="page_item page-item-226"><a href="http://blabla" title="Blabla">Blabla</a></li>
    		</ul>
    	</li>
    	<li class="page_item page-item-17"><a href="http://Blabla" title="Blabla">Blabla</a></li>
    	<li class="page_item page-item-36"><a href="http://Blabla" title="Blabla">Blabla</a></li>
    </ul>
</div>

This almost works However the jQuery code helps to make the drop-lower links unclickable too.

It is always good if anybody understands how to take away the status bar url while hover the "Pictures" link. However I don't believe that's easy to make in moderns browsers for example Safari och Opera?

Thanks!

just replace the href attribute value with #. This way once the user clicks it, the page would go to #, the same page they're on, and absolutely nothing happens. Keep your CSS you authored therefore the hands pointer doesn't appear once they hover it, but take away the jQuery code.

Using jQuery:

$(".page-item-3>a").attr("href", "#")

I'm not sure what control you've due to Wordpress but you are getting this issue because things are included in the title list item (page-item-3) and you are rescheduling the press about this item. If you're able to use a class towards the title link itself, you are able to apply the jQuery to that particular directly.

Regrettably you cannot say ".page-item-3 a" as this affect all links within the list.

Re-Edit - This will choose the very first link within the list and cancel the press worth of that. You may want to apply this for every 'title' link you've.

$(".page-item-3 a:first").click(function() {
   return false;
}

Do this:

$(document).ready(function(){
    //Make parent links unclickable
    $("div > ul > li > a").click(function(){ 
        return false;
    });
});

This can disable all of the first links inside your list without requiring the course title.