I've encountered a minor issue with my CSS code. Whenever I apply filter:gray; to my CSS stylesheet, the black/white images overlap the menu. However, when there is no filter effect on the pictures, the menu behaves as intended.
CSS:
img.images {
filter: gray;
-webkit-filter: grayscale(100%);
}
MENU CSS:
#navigationMenu{
margin: 0 auto;
float: left;
width:175px;
height:680px;
list-style:none;
border-right: 1px dotted #ffff66;
}
#navigationMenu li{
margin: 0 auto;
list-style:none;
height:95px;
padding:4px;
width:95px;
}
#navigationMenu span{
width:0;
left: 95px;
padding:0;
position:absolute;
overflow:hidden;
border-radius: 7px;
margin-top:12px;
white-space:nowrap;
line-height:70px;
}
#navigationMenu a{
height:95px;
width:95px;
display:block;
position:relative;
}
MENU HTML:
<ul id="navigationMenu">
<li>
<a class="home" href="#">
<span>Home</span></a>
</li>
<li>
<a class="about" href="#">
<span>Virtual Tuning</span></a>
</li>
<li>
<a class="services" href="#">
<span>Drawings</span></a>
</li>
</ul>
HTML:
<img class="images" src="images/virtual/seat.jpg">
Any assistance would be greatly appreciated!