Hover a Rollover Navbar over an Image?

How would I hover a navbar, preferably rollover Over an image. I'll show the picture of the website atm. It's a final project for my web design class and i want to make it really pop. Im going for an original navbar and was wondering if it was possible to Put a rollover navbar over the image of the navbar I created in photoshop.




Hehe... I suppose the horrible paint job can explain what Im doing. I can upload the files if need be.

 

Can you please upload it or can you give out your code? I'm very confused. I know how to do rollovers in both JS and CSS, but you need to give more information

 

Add this to your CSS properties.

Code:

#menu
{
	Background-Image: Url('YourHeaderImageLocation');
	Background-Color: Transparent;
	Border: 0px;
	Width: [Image Width]px;
	Height: [Image Height]px;
	Margin: 0px Auto;
	Padding: 0px;
}

#menuformat
{
	Margin: 0px;
	Padding: 3px 0px 15px 15px;
	List-Style: None;
}

#menu ul
{
	Margin: 0px;
	Padding: 0px:
}

#menu li
{
	Float: Left;
	Margin: 0px:
	Padding: 0px;
}

Then in your index (Or where ever you keep your header code)

Add this

<div id="menu">
<ul id="menuformat">
<li><a href="http://example.com/">example</a></li> <!-- Sample normal link-->
<li><a href="http://images.com/"><img src="http://yoursite.com/image.png" width="300" height="40"></a></li> <!-- Sample Image link -->
</ul>
</div>

This will create links / images in your nav bar. You can add a hover affect to the image links by making a div for each link and assigning an a / a:hover property.
For example, a sample image link's CSS.

Code:

#link
{
   background-image: url('http://imagelocation/a.png');
}

#link a
{
   background-image: url('http://imagelocation/a.png'); // same location as before.
}

#link a:hover
{
   background-image: url('http://imagelocation/b.png'); // Your "Glow / Rollover" image.
}

 

http://www.mediafire.com/?csx5j3fhqifazpy.

I'm trying to get a Navbar, On top of the white part. I'm aware of how to make one Its just the positioning I need.