Menus con link con # sin que se recargue la pagina

Muchas veces creamos menus con submenus en los que la opción padre de las hijas no debe llevar a ningún lado, simplemente mostrar el submenu al hacer hover o click, cuando se hace el sitio de manera "manual" no hay mucho problema pero que tal cuando es un sitio dinámico, que el menu cambia o se tienen diferentes idiomas, etc.

Un menu como el mencionado puede verse algo así:
<ul class="menu_top">
      <li><a href="/pagina1">Opcion 1</a></li>
      <li><a href="/pagina2">Opcion 2</a></li>
      <li><a href="#">Opcion 3</a>
            <ul>
                   <li><a href="/pagina3-1">Sub opcion 1</a></li>
                   <li><a href="/pagina3-2">Sub opcion 2</a><li>
            </ul>
      </li>
</ul>​


En una programación normal al hacer clic en Opción 3 nos hará el efecto de ir al top de la pagina agregando el # en la url, si esto es un problema para tu sitio por comodidad o estética te comento que es muy fácil arreglarlo con jQuery, simplemente habrá que agregar el siguiente script:

$('ul.menu_top li a').each(function(){
  if ( $(this).attr("href")=="#" ){
     $(this).click(function(e){
       e.preventDefault();
     });
  }
});
Lo que hace este script es que recorre cada link dentro de la clase indicada y busca si tiene como href el #, si es así le aplica el preventDefault() que hace precisamente lo que queremos, quitar la función de un link con #, es decir,  que nos mande al top de la pagina.
 
Si te sirvió (o no) o tienes comentarios sígueme en twitter: @Javi_Mata