How do I create a CSS dropdown submenu over an image?

Question

I've played with this and I can either get the drop-down part working but can't get rid of the text or I can get the text to disappear so that you can hover/link to parts of the images but can't get the drop-down to work. Help please? I'm a bit of a newbie and might need some hand holding. Thanks in advance!

Here's the code (I've stripped it of the drop-down because it wasn't working):

<div id="nav" role="navigation">
 <div id="mainmenu" class="mainmenu">
 <ul>
  <li class="page_item gifts">
   <a href="#" title="Gifts">Gifts</a>
  </li>

  <li class="page_item about">
   <a href="/about/vision/" title="About Us">About Us</a>
   <ul>
    <li><a href="/about/vision/">Our Mission and Vision</a></li>
    <li><a href="#">Why We Do What We Do</a></li>
    <li><a href="#">Our Company</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">In The Field</a></li>
    <li><a href="#">Advisors</a></li>
    <li><a href="#">Pilot Project</a></li>
    <li><a href="/impact">Impact</a></li>
    <li><a href="/contact">Contact Us</a></li>
   </ul>
  </li>
  <li class="page_item partners">
   <a href="#" title="Partners">Partners</a>
  </li>
  <li class="page_item foundation">
   <a href="#" title="Foundation">Foundation</a>

  </li>
  <li class="page_item voices">
   <a href="#" title="Voices">Voices</a>
  </li>
  <li class="page_item news">
   <a href="#" title="News">News</a>
  </li>
  <li class="page_item blog">
   <a href="#" title="Blog">Blog</a>
  </li>
 </ul>
</div>

Here's the CSS:

#nav .mainmenu
{
 background: url('../images/header_menu.png') left top no-repeat;
 display: block;
 width: 469px;
 height: 29px;
 float: right;
 margin-top: 20px;

}

 #nav .mainmenu ul
 {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: solid 1px;
 }

  #nav .mainmenu ul li.page_item
  {
   display: block;
   float: left;
   height: 30px;
   border: solid 1px;
  }

  #nav .mainmenu ul li.page_item a:link,
  #nav .mainmenu ul li.page_item a:visited,
  #nav .mainmenu ul li.page_item a:active
  {
   display: block;
   float: left;
   height: 30px;
   /*text-indent: -9999px;*/
   margin-right: 1px;
  }

   ul li.gifts a:link,
   ul li.gifts a:visited
   {
    width: 40px;
   }


   ul li.about a:link,
   ul li.about a:visited
   {
    width: 84px;
   }

    ul li.about a:hover
    {

    }

    ul li.about.current_page_item a:link,
    ul li.about.current_page_item a:visited
    {

    }




   ul li.partners a:link,
   ul li.partners a:visited
   {
    width: 70px;
   }


   ul li.foundation a:link,
   ul li.foundation a:visited
   {
    width: 96px;
   }


   ul li.voices a:link,
   ul li.voices a:visited
   {
    width: 58px;
   }


   ul li.news a:link,
   ul li.news a:visited
   {
    width: 58px;
   }


   ul li.blog a:link,
   ul li.blog a:visited
   {
    width: 40px;
    margin-right: 0;
   }