Padding Menu By JQuery
<p>I want to design a menu that when I hover a link , the link pushed forward and when I move the mouse out of that , the link moves backward.</p>

<p>I know I can done that with .hover function.I don't want to use jQuery Events. I want to use just javascript events that they are embed in html tags.</p>

<p>here is my attempt:</p>

<pre><code>  &lt;script type="text/javascript"&gt;
  function MIn()
  {
    jQuery(this).animate({paddingLeft:"20px"},500);
  }
  function MOut()
  {
    jQuery(this).animate({paddingLeft:"0px"},500);
  }             
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul&gt;
    &lt;li onmouseover = "MIn()" onmouseout="MOut()" &gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li onmouseover = "MIn()" onmouseout="MOut()"&gt;&lt;a href="#"&gt;Download&lt;/a&gt;&lt;/li&gt;
    &lt;li onmouseover = "MIn()" onmouseout="MOut()"&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
    &lt;li onmouseover = "MIn()" onmouseout="MOut()"&gt; &lt;a href="#"&gt;Register&lt;/a&gt;&lt;/li&gt;
    &lt;li onmouseover = "MIn()" onmouseout="MOut()"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li onmouseover = "MIn()" onmouseout="MOut()"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;
</code></pre>
