button fade effect text hover problem

I tried all and still have the same problem,i tried one thing i was told in this forum to change the hover text and when I did the fade effect stopped working.

All i want is just to keep the default text as it is but change the text for the hover button without affecting the fade effect,any solution? I would really appreciate this is the css code, javascript of the fade button.

CSS STYLE

#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}

#navMenu li {

background:url(default.jpg) no-repeat center center; /* default background image */
width:120px; /* width and height of the menu item */
height:70px;
position:relative; /* must set it as relative, because .hover class top and left with absolute position will be positioned according to li. */
}

#navMenu li a {color:#696969;size:2em;}{
z-index:20; /* z-index must be higher than .hover class */
display:block; /* display as block and set the height according to the height of the menu to make the whole LI clickable */
height:70px;
position:relative;

}

#navMenu li .hover {

background:url(over.jpg) no-repeat center center; /* mouseover image */
position:absolute; /* must be postion absolute */
width:120px; /* width, height, left and top to fill the whole LI item */
height:70px;
left:0;
top:0;
z-index:0; /* display under the Anchor tag */
display:none; /* hide it by default */

;

}
#navMenu li.selected {
background:url(selected.jpg) no-repeat center center; /* selected image */
}


JAVASCRIPT FUNCTION



<script type="text/javascript">

//<![CDATA[


$(document).ready(function () {

//Append a div with hover class to all the LI
$('#navMenu li').append('<div class="hover"><\/div>');


$('#navMenu li').hover(

//Mouseover, fadeIn the hidden hover class
function() {

$(this).children('div').stop(true, true).fadeIn('1000');

},

//Mouseout, fadeOut the hover class
function() {

$(this).children('div').stop(true, true).fadeOut('1000');

}).click (function () {

//Add selected class if user clicked on it
$(this).addClass('selected');

});

});

//]]>

</script>





DIV CODE


"><div class="menu" id="b" align="left">
<ul id="navMenu">
<li><a href="#"><b>HOME</b></a></li>
<li><a href="#"><b></b></a></li>
<li><a href="#"><b>ART</b></a></li>
<li><a href="#"><b></b></a></li>
<li><a href="#"><b>EVENTS</b></a></li>
<li><a href="#"><b></b></a></li>
</ul>


Please help!!!

Dude! Clean up code, n take a look at this:

#navMenu li a {color:#696969;size:2em;}{
z-index:20; /* z-index must be higher than .hover class */
display:block; /* display as block and set the height according to the height of the menu to make the whole LI clickable */
height:70px;
position:relative;
}

You got the {} thingies wrong.
instead do this:

#navMenu ul li a {
display:block;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
opacity: 0.5;
}

#navMenu ul li a:hover{
opacity: 1;
}

This will get you a nice CSS3-hover, simple as that.

But seriously, clean up the code


Peaaacee!