I am utilizing Dreamweaver's Spy menu without any sub items. By using a background image for "not active", another for "rollover" and attempting to apply one for "active". I have created a class for "active" and assigned it to one of the ul items. However, it is not displaying the background image for "active"; instead, it remains on the "not active" image. When I give the "active" class a background color instead of an image, it overlays the color on top of the "not active" background image. Despite this, the "active" class is functioning correctly.
The "rollover" effect is working as expected.
<!-- begin navContainer -->
<div id="navContainer" class="navPosLeft shadowRadiusNavContainer" >
<!-- begin MenuBar1 -->
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="#">Dental Services</a></li>
<li><a href="#">Meet The Doctor</a></li>
<li><a href="#">Our Office</a></li>
<li><a href="#">Map & Hours</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- end MenuBar1 -->
</div>
<!-- end navContainer -->
The CSS
#navContainer {
background-color: #f0e9e0;
height: auto;
width: 148px;
padding: 10px;
}
.navPosLeft {
float: left;
margin-top: 20px;
margin-left: 20px;
}
.shadowRadiusNavContainer {
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 3px 3px 3px #888;
-webkit-box-shadow: 3px 3px 3px #888;
box-shadow: 3px 3px 3px #888;
}
ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
}
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
ul.MenuBarVertical ul li
{
width: 8.2em;
}
ul.MenuBarVertical
{
/* [disabled]border: 1px solid #CCC; */
}
ul.MenuBarVertical ul
{
/* [disabled]border: 1px solid #CCC; */
}
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
/* [disabled]background-color: #EEE; */
color: #333;
text-decoration: none;
background-image: url(../images/vmenuitem.png);
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
background-position: left top;
}
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
/* [disabled]background-color: #33C; */
background-image: url(../images/vmenuitem.png);
background-position: left center;
}
.active {
/* [disabled]background-color: #FF9; */
background-image: url(../images/vmenuitem.png);
background-position: left bottom;
}