[subzey]

Кстати, а первый пример в HTML5 можно будет делать и без яваскрипта

<style type="text/css">
#menu { table-layout: fixed; border-collapse: collapse; border: none 0px; width: 500px; height: 100px}
#menu td { border: none 0px; overflow: hidden; width: 100px; padding: 0px; 	
	-o-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-webkit-transition: width 0.3s;
	transition: width 0.3s;
}
#menu:hover td { width: 75px; }
#menu td:hover { width: 200px; }
.menu-item { display: block; height: 100px; width: 200px; }
.menu-item-1 {background: yellow}
.menu-item-2 {background: green}
.menu-item-3 {background: blue}
.menu-item-4 {background: orange}
.menu-item-5 {background: purple}
</style>

<table id="menu">
	<tr>
		<td><a class="menu-item menu-item-1" href="#"></a></td>
		<td><a class="menu-item menu-item-2" href="#"></a></td>
		<td><a class="menu-item menu-item-3" href="#"></a></td>
		<td><a class="menu-item menu-item-4" href="#"></a></td>
		<td><a class="menu-item menu-item-5" href="#"></a></td>
	</tr>
</table>

Посмотреть можно в свежих Опере, Сафари и Хроме. В Файрфоксе не заработало, в ИЕ и не заработает.