<!DOCTYPE html>
<html>
<head>
<title>Interactive Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
html, body {margin:24px;font-family:sans-serif;font-size:100%;color:#E4E4E4;background:#4E4E4E;}
#men {width:100%;height:auto;margin:auto;padding:0px;display:none;list-style:none;color:#E4E4E4;}
#men li {padding:4px 0px;border-bottom:1px solid #E4E4E4;}
#men li:hover {padding:4px 0px;text-align:center;}
a {text-decoration:none;color:#E4E4E4;outline:none;}
//-->
</style>
<script type="text/javascript">
<!--
var lap, elm;
function test() {
elm=document.getElementById("men");
elm.style.display='block'; clearTimeout(lap);
lap=setTimeout("elm.style.display='none'", 4000);
}
document.onmousemove=test;
document.onmousedown=test;
document.onkeydown=test;
//-->
</script>
<body>
<pre>I n t e r a c t i v e M e n u</pre>
<br>
<ul id="men">
<li><a href="#">Menu #1</a></li>
<li><a href="#">Menu #2</a></li>
<li><a href="#">Menu #3</a></li>
<li><a href="#">Menu #4</a></li>
</ul>
<br>
<pre>Haz click, pulsa, mueve, actúa ...</pre>
</body>
</html>