I cant seem, to find the error in my CSS Code for my navigation.
Basically the image height is 100px but only 50px of the navigation is shown so that when a user hovers over that image I set for the navigation link 50px of the navigation will be hidden and the other 50px will be shown to add a hover effect. However the Hover effect I wanted doesint seem to work. Here is my code, I'd really appreciate help
HTML :
CSS :
Basically the image height is 100px but only 50px of the navigation is shown so that when a user hovers over that image I set for the navigation link 50px of the navigation will be hidden and the other 50px will be shown to add a hover effect. However the Hover effect I wanted doesint seem to work. Here is my code, I'd really appreciate help
HTML :
HTML:
<div id="nav">
<ul>
<li class="about"><a href="about.html">About</a></li>
<li class="services"><a href="services.html">Services</a></li>
<li class="clients"><a href="clients.html">Clients</a></li>
<li class="contact"><a href="contact.html">Contact</a></li>
</ul>
</div>
CSS :
HTML:
/* Navigation Styling */
#nav {
width:388px;
height:50px;
float:left;
margin-bottom:10px;
}
#nav ul {
list-style:none;
float:left;
width:400px;
height:50px;
float:left;
}
#nav ul {
display:inline;
}
#nav li.about a:link, #nav li.about a:visited {
float:left;
display:block;
width:115px;
height:50px;
background-image:url(images/nav/about.png);
background-repeat:no-repeat;
text-indent: -9999px;
}
#nav li.services a:link, #nav li.services a:visited {
float:left;
display:block;
width:85px;
height:50px;
background-image:url(images/nav/services.png);
background-repeat:no-repeat;
text-indent: -9999px;
}
#nav li.clients a:link, #nav li.clients a:visited {
float:left;
display:block;
width:75px;
height:50px;
background-image:url(images/nav/clients.png);
background-repeat:no-repeat;
text-indent: -9999px;
}
#nav li.contact a:link, #nav li.contact a:visited {
float:left;
display:block;
width:125px;
height:50px;
background-image:url(images/nav/contact.png);
background-repeat:no-repeat;
text-indent: -9999px;
}
/* Navigation Hover-Styling */
#nav ul li.about a:hover{
float:left;
display:block;
width:115px;
height:50px;
background-image:url(images/nav/about.png) no-repeat 0 -50px;
}
#nav ul li.services a:hover{
float:left;
display:block;
width:85px;
height:50px;
background-image:url(images/nav/services.png) no-repeat 0 -50px;
}
#nav ul li.clients a:hover{
float:left;
display:block;
width:75px;
height:50px;
background-image:url(images/nav/clients.png) no-repeat -50px -50px;
background-repeat:no-repeat;
}
#nav ul li.contact a:hover{
float:left;
display:block;
width:125px;
height:50px;
background-image:url(images/nav/contact.png) no-repeat 0 -50px;
}