Ho trovato 10 minuti e ho fatto un esempio,spero che possa andarti bene.
Ecco il codice della pagina di prova.
e la sua versione online, per poterla vede in azione: democodice:<!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=iso-8859-1" /> <title>Documento senza titolo</title> <style type="text/css"> /*<![CDATA[*/ ul.menu { list-style:none;} ul.menu li{ display:inline; width:80px; /* Larghezza elemento del menu */ float:left;} ul.menu li div{ height:20px; /* Altezza riga menu */ overflow:hidden;} ul.menu a{ text-decoration:none; display:block;} ul.menu a.bottom,ul.menu a.bottom:hover{color:#000000;}/* Colore principale */ ul.menu a.up,ul.menu a.up:hover{ color:#990000;} /* Colore superiore */ /*]]>*/ </style> <script language="javascript" type="text/javascript"> /*<![CDATA[*/ var time=15; function init_menu(id){ var mn=document.getElementById(id); var dl=mn.getElementsByTagName('div'); for (var i=0;i<dl.length;i++){ dl[i].scrollTop+=dl[i].offsetHeight;} } function goUp(obj){ obj=obj.getElementsByTagName('div')[0]; for (var i=0;i<obj.offsetHeight;i++){ setTimeout('document.getElementById(\''+obj.id+'\').scrollTop-=1',i*time);} } function goDown(obj){ //clearTimer(); obj=obj.getElementsByTagName('div')[0]; for (var i=0;i<obj.offsetHeight;i++){ setTimeout('document.getElementById(\''+obj.id+'\').scrollTop+=1',i*time);} } /*]]>*/ </script> </head> <body onload="init_menu('menu1')"> <ul class="menu" id="menu1"> <li onmouseover="goUp(this)" onmouseout="goDown(this)"><div id="el1">Item 1Item 1</div> <li onmouseover="goUp(this)" onmouseout="goDown(this)"><div id="el2">Item 1Item 1</div> <li onmouseover="goUp(this)" onmouseout="goDown(this)"><div id="el3">Item 1Item 1</div> <li onmouseover="goUp(this)" onmouseout="goDown(this)"><div id="el4">Item 1Item 1</div>[/list] </body> </html>
io l'ho provato su Firefox 2.0, IE 6 e Opera 9
![]()