Buenas,
es un combinado de css y javascript.
El cambio de aspecto de los enlaces se logra mediante css y el cambio de la imagen de la flecha mediante javascript.
A ver si te vale este ejemplo
<html>
<head>
<title>menú</title>
<style type="text/css">
<!--
a:link {
color: #CC6600;
text-decoration: none;
}
a:visited {
color: #996600;
text-decoration: none;
}
a:hover {
color: #993333;
}
-->
</style>
<script language="JavaScript">
var flechab = new Image()
flechab.src = "flechab.gif"
function CF1(cual)
{document.getElementById(cual).src = 'flechab.gif'}
function CF2(cual)
{document.getElementById(cual).src = 'flechaa.gif'}
</script>
</head>
<body>
<table width="15%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="11%"><img src="flechaa.gif" name="f1" width="7" height="7" id="f1"></td>
<td width="89%"><strong><font size="2"><a href="#" onmouseover="CF1('f1')" onmouseout="CF2('f1')">Enlace 1</a></font></strong></td>
</tr>
<tr>
<td><img src="flechaa.gif" name="f2" width="7" height="7" id="f2"></td>
<td><strong><font size="2"><a href="#" onmouseover="CF1('f2')" onmouseout="CF2('f2')">Enlace 2</a></font></strong></td>
</tr>
</table>
</body>
</html>
Necesitarás, lo primero, las imágenes de las flechas. Las saqué de la página que sugeriste y las llamé flechaa.gif y flechab.gif
Luego se trata de que a cada flecha le des un id o name ) y luego al enlace de al lado le pones la llamada a una u otra función pasándole como argumento el id de la imagen que quieras cambiar.
En el ejemplo, las flechas llevan una el name="f1" y la otra "f2"
Luego a los enlaces les pones un onmouseover="CF1('idDelaflechaquequierascambiar')" y un onmouseout="CF2('elIdDelaFlechaARestaurar')"
saludos