Czy może mi kto powiedzieć, co w tym kodzie jest takiego, że przesuwa #main w prawo, po najechaniu myszką? MooTools jest z SVN'a.

index.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.  
  7. <title>PenguinZoft</title>
  8. <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  9. <script type="text/javascript" src="mootools.svn.js"></script>
  10. <script type="text/javascript">
  11. window.addEvent('domready', function(){
  12. var list = $$('#idList li');
  13. list.each(function(element) {
  14. var fx = new Fx.Styles(element, {duration:200, wait:false});
  15. element.addEvent('mouseenter', function(){
  16. fx.start({
  17. 'margin-left': 5,
  18. 'background-color': '#666',
  19. color: '#ff8'
  20. });
  21. });
  22. element.addEvent('mouseleave', function(){
  23. fx.start({
  24. 'margin-left': 0,
  25. 'background-color': '#333',
  26. 'color': '#888'
  27. });
  28. });
  29. });
  30. });
  31. </script>
  32. </head>
  33.  
  34. <ul id="idList">
  35. <li>Strona główna</li>
  36. <li>Projekty</li>
  37. <li>O nas</li>
  38. <li>Członkowie</li>
  39. <li>XModules</li>
  40. <li>MyID</li>
  41. <li>MyWorkgroup</li>
  42. <li>Support</li>
  43. <li>Forum</li>
  44. <li>Kontakt</li>
  45. </ul>
  46. <div id="main">
  47. Test
  48. </div>
  49. </body>
  50. </html>


style.css
Kod
#idList {
    margin: 0;
    padding: 0;
    float: left;
}

#idList li {
    display: block;
    margin: 0;
    padding: 4px;
    width: 120px;
    background: #333;
    color: #888;
}
body {
    font-family: Tahoma;
    color: #fff;
    background: #222;
}
#main {
padding-left: 6px;
float: right;
text-align: left;
}


Co z tym zrobić?