• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1805
  • Last Modified:

CSS Menu Sprite - Hover Issue

I seem to be having issues with my CSS menu sprite. I have the "up state" working fine but the "hover state" doesn't seem to work. I created the sprite based on a tutorial found here:
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/

Not sure what I'm doing wrong. Any suggestions?
HTML
<ul id="main-nav">
	<li id="nav_home"><a href="#">Home</a></li>
	<li id="nav_about"><a href="#">About Us</a></li>
	<li id="nav_news"><a href="#">News</a></li>
	<li id="nav_events"><a href="#">Events</a></li>
	<li id="nav_factstats"><a href="#">Facts & Stats</a></li>
	<li id="nav_resources"><a href="#">Resources</a></li>
	<li id="nav_presentations"><a href="#">Presentations</a></li>
	<li id="nav_multimedia"><a href="#">Multimedia</a></li>
	<li id="nav_kids"><a href="#">Kids</a></li>
</ul>
 
 
CSS
 
/* MAIN NAV */
 
#main-nav 	{width: 960px; height: 45px; position: relative; background: url(style/images/nav_en.png); margin: 0; padding: 0;}
#main-nav li	{float: left;}
#main-nav li a 	{position: absolute; display: block; height: 45px; background: url(style/images/nav_en.png) no-repeat; margin: 0; padding: 0; text-indent: -9999px; top: 0; overflow: hidden;}
 
 
/* MAIN NAV - UP STATE */
 
li#nav_home a 		{left: 0; width: 76px; background-position: 0 0;}
li#nav_about a 		{left: 76px; width: 108px; background-position: -76px 0;}
li#nav_news a			{left: 184px; width: 76px; background-position: -184px 0;}
li#nav_events a		{left: 261px; width: 92px; background-position: -261px 0;}
li#nav_factstats a		{left: 351px; width: 140px; background-position: -351px 0;}
li#nav_resources a		{left: 491px; width: 122px; background-position: -491px 0;}
li#nav_presentations a 	{left: 613px; width: 149px; background-position: -613px 0;}
li#nav_multimedia a	{left: 762px; width: 121px; background-position: -762px 0;} 
li#nav_kids a			{left: 883px; width: 77px; background-position: -883px 0;}
 
 
/* MAIN NAV - HOVER STATE */
 
li#nav_home a:hover 		{background-position: 0 -50;}
li#nav_about a:hover 		{background-position: -76px -50;}
li#nav_news a:hover		{background-position: -184px -50;}
li#nav_events a:hover		{background-position: -261px -50;}
li#nav_factstats a:hover		{background-position: -351px -50;}
li#nav_resources a:hover	{background-position: -491px -50;}
li#nav_presentations a:hover 	{background-position: -613px -50;}
li#nav_multimedia a:hover	{background-position: -762px -50;} 
li#nav_kids a:hover			{background-position: -883px -50;}

Open in new window

nav-en.png
0
Adam
Asked:
Adam
  • 2
1 Solution
 
David S.Commented:
All of those "-50" need to be "-50px". Units are required for non-zero numerical values except for the line-height and z-index properties.
0
 
v2MediaCommented:
In your css rules for the hover state, you can only omit 'px' from 0 values. The hover css is being ignored because you have not given unit measurements.

li#nav_about a:hover            {background-position: -76px -50;}

Must be:

li#nav_about a:hover            {background-position: -76px -50px;}
0
 
v2MediaCommented:
[no points for my posts]

srry krav - wasted time saving a test file before troubleshooting
0
 
AdamAuthor Commented:
Awwww man! Can't believe I missed that. You know when you've been staring at something for a really long time...anyway, thanks for the help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now