How to make the menu bar transparant, higher and shove it up?

Hi all,

I am working on a website and I have to little knowlegde of CSS, it's a puzzle to me. Hopefully you can help me out.
I want my menu to be higher up and I made a partially transparant gif so it covers the header some, but not all.
I also want it higher in size. And if possible I would like the mouseover shown as a square button sliding over the menu bar.
Is there a way that I can realize this? I made a gif called gradient_bar.png and used this code, but it doesn't work:


div#menu1 {
background-image: url(/wp-content/themes/atahualpa/images/gradient_bar.png') !important;
background-repeat:no-repeat;
height:47px;
border: 0;
}

div#menu1 ul.rMenu {
}

ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
}

I put this in the CSS inserts box.
The website is here (and it's far from finished):
http://www.claudiacreates.nl/menu-1/

It should become like this: http://www.claudiacreates.nl/wp-cont...ngendael-2.jpg

Thanks upfront.