I am making a mess of this:
http://www.saragailbenjamin.com/
I can get the traqnsparent .png into proper display OR I can get total transparency without the .png. I want to have NO grey bar behind my .png image and also have this function in the sub-menus the same way.
Here is the code I have places in the "ADD HTML/CSS insert" area so far:

/*transparent menu background:*/

div#menu1 {
border: none !important;
}

#rmenu2 {
background: transparent !important;
}

/*spacing of menu:*/
#rmenu2 li {
width: 12.6%;
text-align: center;
}
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: transparent !important;
border: none 0px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li {
background: url(/wp-content/ata-images/brushstroke010v150x40.png);
}
ul.rMenu li a:hover {
background: transparent !important;
}

Any help is appreciated<

You have an image in one background statement and then you are setting the background to transparent in another.

You should be using background-image and background-color for selectors. Here is an example of some code to eliminate the background color but I would take out what you have and rethink the code.

.menu-item, .sub-menu {
    background-color: transparent !important;
}