jquery menu hover not working due to live form validation

Okay, i posted a question before to fix my live validation contact form. Now the form athentication is working perfectly but my jquery hover menu effects are going, on other pages menu is working but not on the contact form page..

here is the link to check it online link text

is there any conflict between these two functions.....

    <script type="text/javascript">         
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});

//]]>

</script>

 <script type="text/javascript">
//<![CDATA[
$(function() {

    var LV_Name = new LiveValidation('name',{onlyOnSubmit: true });
   开发者_开发知识库 LV_Name.add(Validate.Presence);

    var LV_Email = new LiveValidation('email', {onlyOnSubmit: true });
    LV_Email.add(Validate.Presence);
    LV_Email.add(Validate.Email);

    var LV_Cap = new LiveValidation('cap',{onlyOnSubmit: true });
    LV_Cap.add(Validate.Presence);
    LV_Cap.add( Validate.Numericality, { is: 4 } );

    var LV_Message= new LiveValidation('message', {onlyOnSubmit: true });
    LV_Message.add(Validate.Presence);

    var service = new LiveValidation('service' , {onlyOnSubmit: true });
    service.add( Validate.Exclusion, { within: [ 'None' ] } );


            });

</script>       

There are no span's anywhere in ul#menu on the contact page, there are span's on the other pages

About page

<li><a class="contact" href="contact.html"><span style="opacity: 0;"></span></a></li>

Contact Page

<li><a class="contact" href="contact.html"/></li>