I have a horizontal menu and I am looking to implement an effect where it moves 20px left when hovered over and returns to its original position when the mouse is no longer hovering over it. I would like to achieve this using JQuery. Can anyone assist me with this? Here is the code that I currently have:
JQuery:
$(document).ready(function () {
$("div.menu li").OnMousehover(function () {
$("li").animate({ left: '20px' });
});
});
ASP.NET:
<div>
<asp:Menu ID="Menu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Page1.aspx" Text="Page1" />
<asp:MenuItem NavigateUrl="~/Page2.aspx" Text="Page2" />
<asp:MenuItem NavigateUrl="~/Page3.aspx" Text="Page3" />
<asp:MenuItem NavigateUrl="~/Page4.aspx" Text="Page4" />
<asp:MenuItem NavigateUrl="~/Page5.aspx" Text="Page5" />
</Items>
</asp:Menu>
</div>