quell'effetto si chiama rollover,

e solitamente viene usato per far capire all'utente che si sta passando su un determinato link.

cmq, un menù seplice orizontale si fa:

Html
codice:
<ul id="menu">
[*]Home[*]Contatti[*]Work[*]Blog[*]Freebies[*]Forum
[/list]
Css

codice:
#menu{margin:auto; padding:0; overflow:hidden;}
#menu li{display:inline; float:left; width:80px; margin-right:1px;}
#menu li a{background:#000; font-size:15px; color:#fff; text-align:center; display:block; padding:5px 8px;}
#menu li a:hover{background:#cf2dcd;} /*Rollover dello sfondo*/

per modifivare il menù e renderlo verticale basta modificare i seguenti parametri:

codice:
#menu li{display:block;}
#menu li a{text-align:left;}