CSS drop doesn't work. Don't know what to do.

Hey everyone,
So I have this navigation menu which uses a background image for the normal and rolloverstates. What i'm having trouble with is getting a drop down to come out of one of the buttons when the user rolls over. I don't know what to do with the CSS so that it doesn't take on the properties of the parent menu (the image) and so that it drops down. Any and all help is welcome. Thanks in advance for your time and effort!

Here is the CSS

#navigation
{
position: absolute;
left: 3px;
top: -1px;
width: 741px;
}

#navigation li
{
float:left;
}
#navigation li a
{
background-image:url(../navegation.jpg);
display:block;
}
.home
{
background-position:0px 0px;
width:125px;
height:45px;
}

.aboutus
{
background-position:-125px 0px;
width:124px;
height:45px;
}

.whyHost
{
background-position:-249px 0px;
width:131px;
height:45px ;
}

.fundraiser
{
background-position:-383px 0px;
width:115px;
height:45px;
}
.party
{
background-position:-505px 0px;
width: 115px;
height:45px;
}


.contactus
{
background-position:-630px 0px;
width:125px;
height:45px
}

#navigation a .hover {
background: transparent url(../navegation.jpg) no-repeat;
display:block ;
opacity: 0;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;

}

#navigation .home .hover {
background-position: -0px -49px;

}
#navigation .aboutus .hover{
background-position: -125px -49px;

}
#navigation .whyHost .hover {
background-position: -249px -49px;
}
#navigation .fundraiser .hover {


background-position: -383px -49px;
}
#navigation .party .hover{
background-position:-505px -49px;
}
#navigation .contactus .hover {
background-position: -630px -49px;
}
#sub ul li{
position: absolute;
display: none;
list-style: none;
border: solid;
}
#sub li hover {
display: block;
}


and the HTML


<ul id="navigation">
<li ><a class="home" href="http://www.events4gold.net"></a></li>
<li ><a class="aboutus" href="http://www.events4gold.net/aboutus.html"></a></li>

<li ><a class="whyHost" href="http://www.events4gold.net/holdinganevent.html"></a></li>
<li><a class = "fundraiser" href = "http://www.events4gold.net/fundraiser.html"></a>
<ul id = "sub">
<li><a href="http://www.events4gold.net/whoarewe.html">How Does it Work</a></li>
<li><a href="http://www.events4gold.net/whatwedo.html">Who We DO</a></li>
</ul>
</li>

<li><a class = "party" href= "http://www.events4gold.net/party.html"></a></li>
<li ><a class="contactus" href="http://www.events4gold.net/contactus.html"></a></li>
</ul>

Here's a good article at http://htmldog.com/articles/suckerfish/dropdowns/ on how to make a drop down effect.

So I tried that, but I get the same problem i've been getting which is the image I'm using for the parent menu is being showed as a background image for the submenu. here's what the code looks like now. Look towards to bottom to see what I did with for the sub menu


#navigation li
{
float:left;
}
#navigation li a
{
background-image:url(../navegation.jpg);
display:block;
}
.home
{
background-position:0px 0px;
width:125px;
height:45px;
}

.aboutus
{
background-position:-125px 0px;
width:124px;
height:45px;
}

.whyHost
{
background-position:-249px 0px;
width:131px;
height:45px ;
}

.fundraiser
{
background-position:-383px 0px;
width:115px;
height:45px;
}
.party
{
background-position:-505px 0px;
width: 115px;
height:45px;
}


.contactus
{
background-position:-630px 0px;
width:125px;
height:45px
}

#navigation a .hover {
background: transparent url(../navegation.jpg) no-repeat;
display:block ;
opacity: 0;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;

}

#navigation .home .hover {
background-position: -0px -49px;

}
#navigation .aboutus .hover{
background-position: -125px -49px;

}
#navigation .whyHost .hover {
background-position: -249px -49px;
}
#navigation .fundraiser .hover {


background-position: -383px -49px;


}
#navigation .party .hover{
background-position:-505px -49px;
}
#navigation .contactus .hover {
background-position: -630px -49px;
}



#navigation li ul {
background-image:none;
position: absolute;
width: 10em;
left: -999em;
}
#navigation li:hover ul {
left: auto;
}
#navigation li:hover ul, #nav li.sfhover ul {
left: auto;
}

This link (http://www.seoconsultants.com/css/menus/tutorial/) should help. Go to the "Grab The HTML" link towards top of page and you will see horizontal drop menu examples. Hope this helps.