dropdown menu bar with graphic that changes?

Hi, I have created a horizontal menu bar that changes when hovered over, and also the hovered image stays when it is on that page (so it is an image split horizontally in the CSS).

Does anybody know how to add a drop-down menu to various sections without messing up the horizontal menu? Are there any tutorials that have screenshots?

The current HTML:

<div id="top_menu">
<div id="navbar">
<ul>
<li><a href="homepage" class="homepage1">Home</a></li>
<li><a href="leadership" class="leadership">Pastor and Leaders</a></li>
<li><a href="about" class="about">About Us</a></li>
<li><a href="churches" class="churches">Fellowship Churches</a></li>
<li><a href="ministries" class="ministries">Ministries</a></li>
<li><a href="media" class="media">Media</a></li>

</ul>
</div></div>


the current css:

#top_menu {
text-align:center;
height: 54px;
width:1000px;
/*margin: 16px 50px 0 auto;*/
padding-bottom:10px;
}
#top_menu #navbar {
width: 1000px;
height: 54px;
margin: 0 auto;

}
#top_menu #navbar ul{
width: 1000px;
/*margin: 5px auto 0 auto;*/
list-style: none;
}
#top_menu #navbar ul li {
display: inline;
}
#top_menu #navbar ul li a {
display: block;
float: left;
height: 54px;
background-image: url(header_menu.png);
text-indent: -9999px;
font: bold 12px 'Bookman Old Style', Times, serif;
/*color: #000;*/
text-decoration: none;
/*padding: 0 9px 0 5px;*/
letter-spacing:-0.4px;
}
#top_menu #navbar ul li a.homepage {
width: 168px;
background-position: 0 0;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.homepage1 {
width: 168px;
background-position: 0 -54px;
background-color: #f6edb6;
}

#top_menu #navbar ul li a.homepage:hover {
width: 168px;
background-position: 0 -54px;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.leadership {
width: 161px;
background-position: -168px 0;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.leadership:hover {
width: 161px;
background-position: -168px -54px;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.leadership1 {
width: 161px;
background-position: -168px -54px;
background-color: #f6edb6;
}

#top_menu #navbar ul li a.about {
width: 169px;
background-position: -329px 0;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.about:hover {
width: 169px;
background-position: -329px -54px;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.about1 {
width: 169px;
background-position: -329px -54px;
background-color: #f6edb6;
}

#top_menu #navbar ul li a.churches {
width: 169px;
background-position: -498px 0;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.churches:hover {
width: 169px;
background-position: -498px -54px;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.churches1 {
width: 169px;
background-position: -498px -54px;
background-color: #f6edb6;
}

#top_menu #navbar ul li a.ministries {
width: 167px;
background-position: -667px 0;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.ministries:hover {
width: 167px;
background-position: -667px -54px;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.ministries1 {
width: 167px;
background-position: -667px -54px;
background-color: #f6edb6;
}

#top_menu #navbar ul li a.media {
width: 166px;
background-position: -834px 0;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.media:hover {
width: 166px;
background-position: -834px -54px;
background-color: #f6edb6;
}
#top_menu #navbar ul li a.media1 {
width: 166px;
background-position: -834px -54px;
background-color: #f6edb6;
}


I want to add a drop-down menu to certain sections such as "about us" without displacing the graphic. Can anybody tell me how I can do that with just HTML and CSS?

Anybody?

http://www.cssplay.co.uk/menus/
http://www.alistapart.com/articles/hybrid/

I also found at the book "Stylin' with CSS" to be the most useful, particularly the chapter on dropdown menus. You should be able to check it out through your public library as an eBook and read it online, otherwise you'll have to get the actual book.