Es muy facil, eso es diseño web basico y realmente no pertenece ah esta categoria ya que esta echo con algo totalmente a Actionscript 3, Flex y/o AIR...
Una parte muy importante que tienes que tomar en cuenta, es que tienes que mantener una banda o un degradado constante durante todo el sitio web para que el efectito ese de que el item del menu seleccionado se incorpore al contenido tenga una coherencia, es sencillo hacerlo y para eso te recomiendo CSS (Hojas de Estilo)...
Yo aria una tabla (Solo por sencilles) y a la tabla le asignaria tal id (la que sea)... y en el css
tienes que manejar:
#ID_deTuTable tr td:hover {
(Aquí solo tienes que ponerle el backgraund del color gris en este caso para que resalte #333)
}
despues creas una clase para el item seleccionado:
#ID_deTuTable tr .selec{
(Aca tendria que ir del mismo color de la bandita o degradado del que te hablaba)
}
Esto es una forma muy sencilla de hacer ese efecto un posible codigo seria este:
Código HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#tabla_menu {
background-color: #999;
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
width: 600px;
}
#tabla_menu tr td {
background-color: #FFC;
text-align: center;
}
#tabla_menu tr td:hover {
background-color: #FC6;
}
#tabla_menu tr .selec {
background-color: #66F;
}
#tabla_menu tr #conten {
background-color: #66F;
}
-->
</style>
</head>
<body>
<table id="tabla_menu" border="0" cellpadding="0" cellspacing="0">
<tr><td>Item 1</td><td class="selec">Item 2</td><td>Item 3</td><td>Item 4</td><td>Item 5</td></tr>
<tr><td colspan="5" id="conten">Mi contenido</td></tr>
</table>
</body>
</html>
Espero te sirva
