Take the 2-minute tour ×

I'm trying to figure out why this works in FireFox, Chrome but not in IE and not properly in Safari and Opera (you can view it working at http://41six.com/about/)


<div id="menu"> 
            <a href="/" class="home" title="Home" alt="fortyonesix">&nbsp;</a>   
            <div id='home-hover'>Home Page</div> 


#menu .home {
    background-image: url('../images/Home.png');

#home-hover {
    padding: 3px 0 3px 10px;
    width: 100px;
    height: 20px;
    color: #fff;
    opacity: .9;
    filter: alpha(opacity=90);
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-bottom-radius: 5px;


$('.home').hover(function() {
function() {

It's definitely not pretty but I'm not sure why its not working for Safari, Opera and IE

share|improve this question
I noticed your using jQuery 1.3.2. You could try jQuery 1.4.2. –  Samuel Apr 16 '10 at 14:09

2 Answers 2

up vote 2 down vote accepted

First, a suggestion: set "overflow" to "hidden" -- it will get rid of a small animation artifact.

Interesting, the hover effect happens in ie6.... =)

Ok so I've found something that will help: try setting

#menu {

yeah, it's not pretty, but it will show you something; mouse over "home", and you see the "Home Page" thing animate out all nice...at the very bottom of your menu. It looks like You have two problems: overflow and positioning.

To highlight the overflow problem, set

#menu {


#home-hover {

(again, these values are just for debugging purposes).

Mouse over the "home" icon, and you will see the problem.

You can fix this (I found by trial and error) by removing the "position:fixed" from #menu, and changing the "z-index"s on all your #home-hover etc. to 1000.

So that's a fair start for you.

Frankly, though, it might be worth while to start over -- it looks like some of this css could benefit from some serious refactoring.

All the best,


share|improve this answer

When you mouse-over the left-menu you are showing a DIV that covers the link, thus you are no longer over the link, you're over the DIV that's on top of it, so the animation goes to the un-hover state immediately.

share|improve this answer
The DIV is displayed to the right of the link. In IE the animation doesn't show at all (it would at least start to show if the above was the case). In Safari it shows the first time and then only half shows the rest. In Opera it shows, then only goes partially away until you hover over another part. –  silent1mezzo Apr 13 '10 at 19:16

Your Answer


