image rollover drop down menu

[midnite]

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! :D

[mnat]

Do you have access to dreamweaver? If so you can simply insert a spry dropdown menu (Insert-->Spry-->Spry Menu Bar). Then you can modify the included CSS to add images, colors, roll over effects, etc. It is pretty easy, and there are loads of tutorials (type: Drop down spry menu tutorial).

You could also use Java script. Here is tutorial (http://tutorials.alsacreations.com/deroulant/)I just randomly found (there are tons more (type:JAva script drop down menu)


For a really fancy menu that plays up user interaction, creating a menu in Flash is your best bet, but only if you know how to use it.

Hope that helps

[DDD]

I didnt see a drop shadow in you link posted, just colored birders giving the dropshadow effect. I have done this several times and it is not as hard as you may think. But the quickest route is to grab a suckerfish code sample and go from there. If I get time and no one else replies then I will aide a bit more. But no means do you have to use JS. Actually check listmatic and see if they have a sample you can dload.

[midnite]

Brilliant! thanks mnat! the spry method worked perfectly and was exactly what i needed. the css was soooo easy to modify and i was able to keep my current markup in tact. thanks again! :thumb: