remove the a href from the top of the menus on wordpress

Question

i want to remove the automatic a href link from the function wp_list_pages() on wordpress menu, but i do not want to remove the href form the sub menu, only from the top menu

for example:

<li><a href="www.games.co.il">Games-not remove thr href</a> 
  <ul>
    <li><a href="www.x4.co.il">Menu0-remove the auto href</li>
    <ul>
      <li><a href="www.x1.co.il">sub-menu 1-do not remove the auto href</a></li> 
        <ul>
          <li><a href="www.ddd.co.il">**not** remove the href</li> 
        </ul>
      <li><a href="www.x1.co.il">sub-menu 2 not-remove the auto href</li>
    </ul>
  </ul>    
</li>

Answer 1

Target the links in LI's that are direct children of the main list..

$("ul#menu > li a").removeAttr("href");

http://api.jquery.com/child-selector/

Or leave the url in place and return false on them..

$("ul#menu > li a").click(function(){ return false; });

The URL would appear in the browser still, but clicking the link would do nothing(if JS is enabled).

Answer 2

As David Dorward stated "Stop wanting that!".

What you CAN do, is a redirect on your main pages to the first sub item (usually an overview, etc). This is best used for compatibility in case someone has JS disabled, and the dropdown/hover menu still works.

Alternatively include a sub menu on the main page contents which will help the user navigate where you want them to just as easily without sacrificing usability.

Answer 3

Using jQuery: Something like this:

$("ul#menu li:first a").removeAttr("href");