Image rollover drop down menu

1

hey guys, anyone know of a good way to make a rollover image show a drop down menu? i’ve looked all over google, different keyword variations and all i came up with are old codes that don’t work in IE, or drop down menus with text, but not rollover images. i need something like this: http://lion-nathan.com.au/ but doesn’t have to be that fancy with the sliding feature, although that’s pretty cool. basic would be fine.

i’m using tableless css and haven’t been able to figure out how to do it with an image. css code for the button that needs the drop down is currently like this:


#navBrowse {
     position: absolute;
     width:140px;
     margin-top: 0px;
     margin-left: 334px;
     background-color: #999999;
     z-index: 2;
     overflow: visible;
}

a.navBrowse {
     display: block;
     width: 140px;
     height: 52px;
     background-image: url(../images/navBrowse.jpg);
     background-repeat: no-repeat;
     background-position: 0px 0px;
     z-index: 2;
}
	 
a.navBrowse:hover {
     background-position: 0px -52px;
     z-index: 2;
}

and html text is currently like this:


<!-- START NAV -->
	<div id="nav">
		<div id="navHome"><a href="index.html" class="navHome"></a></div>
		<div id="navBrowse"><a href="#" class="navBrowse"></a></div>
		<div id="navContact"><a href="contact.html" class="navContact"></a></div>
	</div>
<!-- END NAV -->

this code isn’t set in stone, so i can alter it however, like using list tags instead, etc. any help or links to tutorials would be REALLY REALLY appreciated! :smiley: