jQuery Bounce Makes CSS Buttons Disappear

I've recently replaced the images of my buttons (where the jQuery code worked just fine) with CSS buttons, and now they're disappearing as soon as I click on them (which activates the bounce function).

Demo: http://jsfiddle.net/KGAmZ

Any help wo开发者_Python百科uld be much appreciated!

The margin-top rules are throwing things off. Remove margin-top from #mainMenu and replace it with top: -45px. Then remove the top rule from .mainMenuButton, and you should be set.

#mainMenu
{
    position: relative;
    width: 1024px;
    height: 80px;
    z-index: inherit;
    top: -45px;
    zoom: 1; /* For IE6 */
}
.mainMenuButton
{
    float: left;
    text-align: center;
    width: 128px;
    height: 80px;
    background-color: #ddd;
    padding: 0px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    behavior: url(js/border-radius.htc);
}

Edit: I'm new to the fiddle. Example there as well: http://jsfiddle.net/KGAmZ/8/

You are calling the wrong class.

Change it to this and it works

$(".mainMenuButtonText").click(function()

Example: http://jsfiddle.net/jasongennaro/KGAmZ/2/

EDIT

As per your comment below... in that case, just remove top: -45px; from the .mainMenuButton rule.

Example 2: http://jsfiddle.net/jasongennaro/KGAmZ/9/