Main Menu Level - Different Backgrounds?
I am trying to make a custom menu in CSS Menu Writer for my dwt but wish to have different background images for each button. I will then take this menu and use it as a preset in site sculptor.
To show you in context, here is the website I am moving over to site sculptor CMS so the client can change information themselves:
AboutUs.html
The navigation is vertical and requires different colors for each one. How can I accomplish this since the CSS menu writer only does it by level and not each item?
Here is the CSSMenuWriter/cssmw_content/menu.CSS:
"ul#cssmw_content {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 0;
}
ul#cssmw_content ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw_content ul li {
background-image: none;
}
ul#cssmw_content li {
background-image: none;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}
ul#cssmw_content li ul {
display: none;
top: 0;
}
ul#cssmw_content li:hover > ul {
display: block;
position: absolute;
}
ul#cssmw_content li.hover > ul {
display: block;
position: absolute;
}
ul#cssmw_content li.current > ul {
position: absolute;
}
ul#cssmw_content > li {
background-image: none;
}
ul#cssmw_content > li > a, ul#cssmw_content > li > a:link {
background-image: url("../cssmw_content_images/AboutUs.png");
border-bottom-color: #fff;
border-bottom-width: 1px;
border-right-color: #fff;
border-right-width: 1px;
color: #173232;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
height: 125px;
margin: 0 0 0 0;
padding: 0px 0px 0px 0px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
outline-style: none;
}
ul#cssmw_content > li > a:active, ul#cssmw_content > li > a:focus {
background-color: #EBEBEB;
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw_content > li:hover > a, ul#cssmw_content > li:hover > a:link {
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw_content > li.hover > a, ul#cssmw_content > li.hover > a:link {
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw_content > li.current > a.current, ul#cssmw_content > li.current > a.current:link {
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
"
Thanks