Making clickable link area bigger, but using an image link

I found this page earlier and it details how to get something like that working:

http://v3.thewatchmakerproject.com/journal/154/simple-css-how-to-make-clickable-areas-bigger

However, it seems this method falls apart when using images. I'm using the image rollover technique where it just moves the image position... if I increase the padding size on the tag as it does in the tutorial, it reveals what part of the image is suppose to be hidden... not only that, but the clickable area get's aligned to the left when I need to be centered. Doing that, there is no additional room on the left to click the link unless you are moving over the image, and on the right there is a bunch of room.

I know it's possible to do this, I'm just not sure what I'm doing wrong. How would the tutorial be altered? Here's what I have:

ul {
  list-style-type: none;
  overflow: auto;
  padding: 0;
  margin: 0;
}

ul li {
  float: left;
  margin: 0px 10px;
}

ul li a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 5px;
}

ul li a:hover {
  text-decoration: underline;
}

#workbutton {
  float: left;
  display: block;
  width: 29px;
  height: 9px;
  margin-left: 30px;
  background: url(../images/buttons/work_button.png) no-repeat 0 0;
}

#workbutton:hover {
  background-position: 0 -9px;
}

#workbutton span {
  display: none;
}

#processbutton {
  float: left;
  display: block;
  width: 47px;
  height: 9px;
  background: url(../images/buttons/process_button.png) no-repeat 0 0开发者_StackOverflow中文版;
}

#processbutton:hover {
  background-position: 0 -9px;
}

#processbutton span {
  display: none;
}

#clientsbutton {
  float: left;
  display: block;
  width: 38px;
  height: 9px;
  background: url(../images/buttons/clients_button.png) no-repeat 0 0;
}

#clientsbutton:hover {
  background-position: 0 -9px;
}

#clientsbutton span {
  display: none;
}

#contactbutton {
  float: left;
  display: block;
  width: 44px;
  height: 9px;
  background: url(../images/buttons/contact_button.png) no-repeat 0 0;
}

#contactbutton:hover {
  background-position: 0 -9px;
}

#contactbutton span {
  display: none;
}

#homebutton {
  float: left;
  display: block;
  width: 33px;
  height: 9px;
  background: url(../images/buttons/home_button.png) no-repeat 0 0;
}

#homebutton:hover {
  background-position: 0 -9px;
}

#homebutton span {
  display: none;
}

<div>
  <ul>
    <li><a id="workbutton" href="#" title="Work"><span>Work</span></a></li>
    <li><a id="processbutton" href="#" title="Process"><span>Process</span></a></li>
    <li><a id="clientsbutton" href="#" title="Clients"><span>Clients</span></a></li>
    <li><a id="contactbutton" href="#" title="Contact"><span>Contact</span></a></li>
    <li><a id="homebutton" href="#" title="Home"><span>Home</span></a></li>
  </ul>
</div>