Cerco di fare un minimo di chiarezza.

Se l'evento richiesto e` il click, e dopo il click deve rimanere fermo, con i CSS non si riesce a realizzare.
In tal caso e` necessario JS (se non si deve far ricorso a richieste al server), oppure e` necessario ricaricare la pagina (o una parte di essa - vedi AJAX o sim).

Se invece l'evento puo` essere l'hover e non sono necessarie richieste al server, allora si puo` realizzare tramite CSS.
In tal caso la cosa piu` semplice e` nascondere un pezzo (ad esempio un <div>).
L'effetto visibile e` lo stesso dello spostamento.

Esempio:
codice:
<body>
  <div id="header">
    <div id="header_sup">
      

 qui la parte che verra` nascosta </p>
    </div>
    <div id="header_inf">
      

 qui la parte dell'header che resta visibile </p>
    </div>
  </div> 
  <div id="content">
    ... il resto della pagina 
  </div>
</body>
Con questa marcatura e` semplice cambiare il valore dell'attributo display della parte #header_sup da block a none, e si ha l'effetto di spostamento.
La stessa marcatura e` comoda anche se si usa una tecnica JS o di ricaricamento di parte della pagina, dato che la marcatura stessa semplifica il comando da dare.