¿Que necesidad hay en utilizar javascript cuando la solución está en CSS?
El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado apagado (off) y encendido (on) en dos imágenes:
- menu-izq.gif
- menu-der.gif (Esta imagen tiene que ser bastante ancha para que se adapte a todo tipo de palabras.)

Las imágenes miden de alto 84px, así entonces el menú medirá la mitad de la imagen, por posiciones de background definimos el over.

En nuestra hoja de estilos definiremos lo siguiente:

/**************************************************************************
CSS DOCUMENTO - MENÚ ROLLOVER CSS - 20090317@JCP - DIXSO.NET
***************************************************************************/
#menu 			{float:left; width:100%; font-size:12px; border-bottom:1px solid #2763A5;}
#menu ul 		{padding:10px 10px 0 50px; list-style:none;}
#menu li 		{display:inline;}
#menu a 		{float:left; padding:0 0 0 4px; text-decoration:none; background: url(../imagenes/menu-l.gif) no-repeat left top;}
#menu a span 		{float:left; display:block; padding:5px 15px 4px 6px; font-weight:bold; background:url(../imagenes/menu-r.gif) no-repeat right top; color:#FFF;}
#menu a:hover 		{background-position:0% -42px;}
#menu a:hover span 	{background-position:100% -42px;}

Y en nuestro código html definiremos lo siguiente:

<div id="menu">
  <ul>
    <li><a href="#" title="Enlace 1"><span>Enlace 1</span></a></li>
    <li><a href="#" title="Enlace 2"><span>Enlace 2</span></a></li>
    <li><a href="#" title="Enlace 3"><span>Enlace 3</span></a></li>
    <li><a href="#" title="Enlace 5"><span>Enlace 5</span></a></li>
    <li><a href="#" title="Enlace 6"><span>Enlace grande 6</span></a></li>
	<li><a href="#" title="Enlace 7"><span>Enlace 7</span></a></li>
  </ul>
</div>

Ejemplo aquí.
Descarga aquí.