I'm using Dreamweaver to create my website, and have inserted a Spry Menu Bar on my pages. Today I created some images to use as backgrounds for the buttons on my Spry Menu Bar.

 

The first ones were for the menu bar itself, with the headings which you hover the mouse over to view the dropdown menus. This is the default code for the menu bar:

ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #00F;
	padding: 0.5em 0.75em;
	color: #FFF;
	text-decoration: none;
}

This is what I changed the code to so that it would show the background image:

ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-image: url(menubaritems.fw.png);
	padding: 0.5em 0.75em;
	color: #FFF;
	text-decoration: none;
}

When I preview the page in my internet browser, it has taken the background colours off the buttons and there is nothing there (you can see straight through to the page background). I have checked and all the files are in the correct place, and all the links are set up correctly (the image is in the same folder as the CSS file). I also know that I am editing the correct part of the CSS code because I tried just changing the background colour from '#00F' to '#000', and it changed the background colours perfectly when I did that.

 

So it's only when I try to create the link to the image file that it doesn't work properly (removes the background altogether). What am I doing wrong?

 

Thank you for any help.

I'm not an expert on this, but this is a simple hover navigation bar that I use, and it works very well for me:

#navbar{
    display: block;
    width: 1000px;
    height: 60px;
    background: url(images/navbar.png);    
}

#navbar ul {
    width: 1000px;
    margin: auto;
    padding-left: 0px;

}

#navbar li {
    display: inline;
	
}

#navbar a {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: bolder;
    text-align: center;
    text-decoration: none;
    color: #000;
    display: block;
    line-height: 60px;
    float: left;
    font-weight: normal;
    width: 16.66%;

}

#navbar a:hover, .active{
    font-weight: normal;
    text-align: center;
    background: url(images/navbar-hover.png);
    background-repeat:repeat-x;
    background-position:center;
    height: 60px;
    text-decoration: none;
    color: #000;
    display: block;
	
	}

Obviously replace the image locations and the width/height to your liking. Hopefully this helps And I don't know why but I always prefer using divs but that's just me and probably isn't very correct and efficient, but it works.

Edited October 5, 201312 yr by William046

I think you need it on your <li> elements rather than your <a> elements.

I think you need it on your <li> elements rather than your <a> elements.

Thank you for your help, that worked.