Personalized navigation menu written by JQuery

(1): XHTML:
Copy codeThe Code is as follows:
<Div id = "sidebar">
<Ul>
<Li> <a href = "index.html" class = "normalMenu"> Home </a> </li>
<Li> <a href = "services.html" class = "normalMenu"> Services </a> </li>
<Li> <a href = "faq.html" class = "normalMenu"> FAQ </a> </li>
<Li> <a href = "testimonials.html" class = "selectedMenu"> Testimonials </a> </li>
<Li> <a href = "about.html" class = "normalMenu"> About Alpacas </a> </li>
<Li> <a href = "contact.html" class = "normalMenu"> Contact Us </a> </li>
</Ul>
</Div>

(2): JQuery
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ('# NavigationMenu li. normalMenu'). each (function (){
// Create a duplicate hyperlink and position it abve the current one
$ (This). before ($ (this). clone (). removeClass (). addClass ('hopmenu '));
});
$ ('# NavigationMenu li'). hover (function (){
// We assign an action on mouse over
$ (This). find ('. hoverMenu'). stop (). animate ({marginTop: '0px '}, 200 );
// The animate method provides countless possibilities
},
Function (){
// And an action on mouse out
$ (This). find ('. hoverMenu'). stop (). animate ({marginTop: '-25px'}, 200 );
});
});

(3) CSS
Copy codeThe Code is as follows:
/* Page styles */
Body, h1, h2, h3, p, td, quote, small, form, input, ul, li, ol, label {
Margin: 0px;
Padding: 0px;
}
Body {
Margin-top: 20px;
Font-family: Arial, Helvetica, sans-serif;
Color: # 51555C;
Height: 100%;
Font-size: 12px;
}
/* Navigation menu styles */
Ul {
Height: 25px;
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px;
}
Ul li {
Border: 1px solid #444444;
Display: inline-block;
Float: left;
Height: 25px;
List-style-type: none;
Overflow: hidden;
}
Ul li a, ul li a: hover,
Ul li a: visited {
Text-decoration: none;
}
. NormalMenu,. normalMenu: visited,
. HoverMenu,. hoverMenu: visited,
. SelectedMenu,. selectedMenu: visited {
Outline: none;
Padding: 5px 10px;
Display: block;
}
. HoverMenu,. hoverMenu: visited,
. SelectedMenu,. selectedMenu: visited {
Margin-top:-25px;
Background: url (img/grey_bg.gif) repeat-x # eeeeee;
Color: #444444;
}
. SelectedMenu,. selectedMenu: visited {
Margin: 0;
}
. NormalMenu,. normalMenu: visited {
Color: white;
Background: url (img/dark_bg.gif) repeat-x #444444;
}

(4)