Problem in vertical navigation menu using css sprites
- by ShiVik
Hello all
I am trying to create to a vertical navigation menu using CSS sprites. I want to put in it a hover effect where the menu option slides out a bit.
a:link {
background: url(images/nav.png);
background-position: -100px 0px;
width: 150px;
}
a:hover {
background: url(images/nav.png);
background-position: -100px 0px;
width: 160px;
}
So I am using the same image, I am just increasing its size to create a pop out effect.
But my problem is that right now the image's size is increasing to the right. I want to keep the image's base aligned and its head should pop out. Here's my complete css code:
#navmenu {
left: 100px;
margin: 0;
padding: 0;
position: absolute;
top: 150px;
width: 150px;
z-index: 99;
}
#navmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navmenu ul li {
line-height: 1.5em;
padding: 0px;
}
#navimenu ul li a {
color: black;
display: block;
font-weight: bold;
height: 26px;
padding: 0px 15px 0px 0px;
text-align: right;
width: 150px;
}
#navmenu a:link, #navmenu a:visited {
background: url(images/nav.png) no-repeat;
background-position: -150px 0px;
width: 150px;
}
#navmenu a:hover {
background: url(images/nav.png) no-repeat;
background-position: -150px 0px;
width: 160px;
}
Don't know how much if I've put the problem correctly but can somebody help me out here?
Thanks
