Unique Background Image - horizontal menu
Thanks Jason, I'm almost there, but when I view my page, All of the center images are the new center image for the donate menu!
Here's the line in the menu.php:
<li id="donate"><span><a href="{link to donation form here}" target="_blank">Donate Now</a></span></li>
and the CSS as per your instructions:
/* code for custom donation menu */
ul#cssmw3 > li#donate {
background-image: url("../cssmw3_images/MainNav_Donate_left_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li#donate > span {
background-image: url("../cssmw3_images/MainNav_Donate_right_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li#donate > span > a, ul#cssmw3 > li > span > a:link {
background-image: url("../cssmw3_images/MainNav_Donate_center_s01_1.gif");
background-repeat: no-repeat;
color: #F1F3F2;
display: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 8px 0 8px;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 108px;
outline-style: none;
}
ul#cssmw3 > li#donate:hover {
background-image: url("../cssmw3_images/MainNav_Donate_lefthover_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li#donate.hover {
background-image: url("../cssmw3_images/MainNav_Donate_lefthover_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li#donate.current {
background-image: url("../cssmw3_images/MainNav_Donate_lefthover_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li#donate:hover > span {
background-image: url("../cssmw3_images/MainNav_Donate_righthover_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li#donate.hover > span {
background-image: url("../cssmw3_images/MainNav_Donate_righthover_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li#donate.current > span.current {
background-image: url("../cssmw3_images/MainNav_Donate_righthover_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li#donate:hover > span > a, ul#cssmw3 > li:hover > span > a:link {
background-image: url("../cssmw3_images/MainNav_Donate_centerhover_s01_1.gif");
background-repeat: no-repeat;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw3 > li#donate.hover > span > a, ul#cssmw3 > li.hover > span > a:link {
background-image: url("../cssmw3_images/MainNav_Donate_centerhover_s01_1.gif");
background-repeat: no-repeat;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw3 > li#donate.current > span.current > a.current, ul#cssmw3 > li.current > span.current > a.current:link {
background-image: url("../cssmw3_images/MainNav_Donate_centerhover_s01_1.jpg");
background-repeat: no-repeat;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
/* end code for custom donation menu */
Now all center nav images in the other menus use the center images for the donate menu in both states, but the Left and Right images are the correct images - let me know what I did wrong!
Thanks!