Hover for navigation bar

How can I create a hover image for the different navigation options in the navigation bar.

Example, right now I use :

<?php wp_list_pages("title_li=&include=9, 10, 11, 12"); ?>

Code (markup):

I need this to resemble the following code as each nav option has a hover

<li id="menu1"><a href="index.html">Home</a></li>
  <li id="menu2"><a href="portfolio.html">portfolio</a></li>
  <li id="menu3"><a href="services.html">Services</a></li>
  <li id="menu4"><a href="faq.html">FAQ</a></li>

Code (markup):

 

use the css background property

li#menu1 a:hover {
    background-image: url("images/menu1-hover.gif");
}
li#menu2 a:hover {
    background-image: url("images/menu2-hover.gif");
}
li#menu3 a:hover {
    background-image: url("images/menu3-hover.gif");
}
li#menu4 a:hover {
    background-image: url("images/menu4-hover.gif");
}

Code (markup):

... and so on and so forth