I am 95% of where I need to be with my menu bar. I wanted my menu items within the Header image so I tried using negative margins to move it up. However, I found Google Chrome did not properly display the menu items (they bunched up on top of one another).

To work around this, I created a image for the menu bar that sits right below the Header image. I pieced together code from various posts to come up with the following (see results at www.ewrittenword.com). What is not working is the current page still shows a background color rather than transparent. Would someone take a quick look at my coding and offer suggestions to fix and perhaps clean it up?

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
font-weight: bold;
}
ul.rMenu li {
margin-right: 40px;
}
/*reset for submenus*/
ul.rMenu li ul li {
margin-right: 0;
}
div#menu1 ul.rMenu {
background:transparent url(http://MenuBanner.png);
}
div#menu1 ul.rMenu li {
background:transparent;
}

Thanks!

Bob Nimchuk

change

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
font-weight:bold
}

to

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
background:transparent !important;
font-weight:bold
}

Thanks Juggledad. That did the trick. I thought I had tried that but I did not use the !Important option.