CSS Menu Sprite - Hover Issue

Posted on 2009-04-26
Last Modified: 2012-05-06
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:

Not sure what I'm doing wrong. Any suggestions?

<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>



/* 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;}


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;}


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

Question by:Adam
    LVL 42

    Accepted Solution

    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.
    LVL 19

    Expert Comment

    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;}
    LVL 19

    Expert Comment

    [no points for my posts]

    srry krav - wasted time saving a test file before troubleshooting
    LVL 1

    Author Comment

    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!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Suggested Solutions

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now