Just getting started with js/jquery but having trouble understanding how to integrate with my external .css file.  This will be an easy question for an intermediate or experienced programmer.

Q: I simply want to add .hover to <li> items inside #siteLinks.  What's the problem? (below)

1. // HTML
2. <div id="siteLinks">
3.     <h4>Sitle Links</h4>
4.     <ul>
5.         <li><a "href=http://www.example.com">Example List Item 1</a></li>
6.         <li><a href="http://www.adbusters.com">Example List Item 2</a></li>
7.     </ul>
8. </div>
9.  
10. // CSS
11. body {
12.     margin: 0px;
13.     font-family: Helvetica;
14.     font-size: 14px;
15.     }
16. #siteLinks {
17.     height: 480px;
18.     width: 320px;
19.     padding: 10px;
20.     }
21. ul {
22.     display: block;
23.     padding: 5px
24.     }
25. li {
26.     display: block;
27.     color: #000000
28.     margin: 5px;
29.     padding: 5px;
30.     }
31. .hoverOn {
32.     background-color: #000000
33.     color: #FFFFFF
34.     display: block
35.     }
36.  
37. // jQuery Javascript
39. $(document).ready(
40. function() {
41. $('li').hover(
42. function() {
43. $(this).addClass('hoverOn');
44. },
45. function() {
46. $(this).removeClass('hoverOn');
47. }
48. );
49.     

Most likely the problem is with $(li).hover,

and/or missing the period(.) in (".hoverOn")

Or do I need to define more specific CSS for tags <ul li>, <li a>, <li a:hover>

Finally - I will be able to add .toggle (copy from .hover)

******** I'd greatly appreciate your assistance.  Thanks!

John