Creating a hover effect

Hi, I’m trying to create a hover over effect using two images for “left” and “right” so that it can expand automatically when needed. Here’s the code they have so far but I’m not sure how I should add the hover effect code in.

/*++++++ NAV ++++++++*/
#nav { width:1000px; height:33px;}
#nav ul{}
#nav ul li{ float:left; margin: 0 10px 0 0; height: 33px; overflow: hidden; display: inline; line-height:33px;}
#nav ul li a {display: block; color:#292929; padding:0 10px 0 10px; font-weight:bold; text-transform:uppercase; }
#nav ul li.current_page_item { background: url(images/navright-a.gif) no-repeat right;}
#nav ul li.current_page_item a { background: url(images/navleft-a.gif) no-repeat left; color:#fff; }

What I tried adding was this but it doesn’t work lol.

#nav ul li :hover {background: url(images/menu_over.gif) no-repeat left;}
#nav ul li a:hover {background: url(images/menu_overright.gif) no-repeat right;}

I don’t know CSS so I’ve just been trial and error-ing around.