Background image issue in Google Chrome and Safari

Here is my CSS:

#menu {
    float: left;
    background: url(images/menu_normal.jpg) repeat-x bottom;
}

#menu li {
    display: inline;
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 60px;
}

#menu li a:hover {
    display: inline;
    background: url(images/menu_hover.jpg) repeat-x bottom;
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 60px;
}

Here is my HTML:

<div id = "menu">
        <ul>
            <li><a href = "#">All</a></li>
            <li><a href = "#">Sports</a></li>
            <li><a href = "#">Movies</a></li>
            <li><a href = "#">Shows</a></li>
            <li><a href = "#">Sales</a></li>
            <li><a href = "#">Clubs</a></li>
            <li><a href = "#">Concerts</a>开发者_开发知识库</li>
            <li><a href = "#">Parties</a></li>
        </ul>
    </div>

The background image for a:hover is not displayed in Chrome and Safari. I found something about WebKit bug, but is it really and if yes, how could it be fixed?

Here is the URL: http://eximi.dreamhosters.com/feasibility/statue.html

Thank you!

---

#menu li {
    display: block;
    float: left;
}

#menu li a {
    display: block;
    background: transparent; /* IE6 will love this! */
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 60px;
}

#menu li a:hover {
    background: transparent url(images/menu_hover.jpg) repeat-x bottom; /* oh, oh, a fix here, transparent added */
}

I'd do it similar to this.

But without a real example, I have hard time judging this. Same as Michael, if doesn't work, let me know.

Plus, jsFiddle or a link to actual site would be nice.

Okay, I made an example...

http://jsfiddle.net/dpCwp/

As you can see, there is your version of code in div#bugged which is not working and, mine - div#fixed. Yes, they use no images, but as you can see #bugged doesn't work with colors anyway.

And just in case, a working version with image for background - http://jsfiddle.net/dpCwp/3/

Huh, and just tested on internet-explorer6/7/8/9 and with newest versions of opera, safari, chrome, firefox — works like a charm (except the delay when loading remote image..)

And just to make things clearer... that's in no way a bug related to webkit or whatever, that's improper use of css!

Updated, to reflect your actual CSS

Your CSS

---

#menu {
    float: left;
    background: url(images/menu_normal.jpg) repeat-x bottom;
}

#menu li {
    display: inline;
    /*background: url("../images/menu_normal.png") no-repeat scroll 0 0 transparent;*/
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 60px;
}

#menu a:hover {
    display: inline;
    background: url(images/menu_hover.jpg) repeat-x bottom;
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 60px;
}

#menu a:active {
    display: inline;
    background: url(images/menu_active.jpg) repeat-x bottom;
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 60px;
}

Must be replaced to:

---

#menu {
    float: left;
    background: url(images/menu_normal.jpg) repeat-x bottom;
}

#menu li {
    display: block;
    float: left;
    /* lots of useless stuff have been removed from this rule and moved to next rule (#menu li a) */
}

#menu li a {
    /* you haven't added this rule in your CSS, it's essential! */
    display: block;
    background: transparent; /* IE6 will love this! */
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 60px;
    /* see properties added from #menu li, to here... */
}

#menu li a:hover {
    background: transparent url(images/menu_hover.jpg) repeat-x bottom;
    /* useless stuff removed again */
}

#menu li a:active {
    background: transparent url(images/menu_active.jpg) repeat-x bottom;
    /* and we don't need those tags here again... */
}

---

1. The CSS properties I removed were essential, and those which I added too. Same for rules!
2. I've removed all the properties from :hover, :active pseudo-classes, because those are inherited from #menu li a, which you don't have at all in your CSS.

   ---

Update 2

So I just changed #menu associated rules with Chrome(! the browser you don't get this working) on-the-go to these:

#menu { float: left; }
#menu ul { overflow: auto; margin: 0; padding: 0; }
#menu li { display: block; float: left; background: url(images/menu_normal.jpg) repeat-x bottom; }
#menu li a { display: block; background: transparent; height: 33px; line-height: 33px; text-align: center; width: 60px; }
#menu li a:hover { background: transparent url(images/menu_hover.jpg) repeat-x bottom; }
#menu li a:active { background: transparent url(images/menu_active.jpg) repeat-x bottom; }

And it works flawlessly! So, I'm going to say it once again, that's no bug, that's invalid CSS.

---

Change #menu li a:hover to #menu li:hover a instead.

---

It appears to be a webkit bug upon a bit of searching for it. Perhaps try the method posed at the following page? http://www.simonday.com/web-design-blog/2010/10/20/css-ahover-not-working-or-crashing-webkit-chrome-safari/

Just change your code to:

#menu li a:hover, #menu li:hover, a {
    ...
}

---

Try this:

#menu ul li a:hover {
(style info here)
}

If this doesn't fix it, let me know!