Can't get a fade in to work on megamenu

Hi,

i have a menu with the following markup (stripped back for demo purposes):


<ul class="megamenu"><!-- BEGIN MENU -->


            <li class="menuitem_fullwidth"><a href="#_" class="menuitem_drop active">First link</a><!-- Begin Full Width Item -->

                     <div class="dropdown_fullwidth"><!-- Begin fullwidth container -->

                                 <div>some content in drop down</div>
                  </div><!-- End fullwidth container -->
            </li><!-- End Full Width Item -->
</ul>

I’ve tried adding:

<script>
$(document).ready(function(){
    $(".megamenu li").hover(
         function() { $('div.dropdown_fullwidth').fadeIn("slow");
        },
        function() { $('div.dropdown_fullwidth').fadeOut("slow");
    });
});
</script>

…but it doesn’t work.
Is it possible with jquery or css3?

thanks for any help

Hi,

That works more or less as expected for me.
What is the exact problem you are having?

Hi thanks for your response. Apparently it was more involved…i needed to do this:

<script>
jQuery(document).ready(function(){
    jQuery(".megamenu li .dropdown_fullwidth").css('opacity', 0);
 jQuery(".megamenu li").hover(
        function() {
            jQuery(this).siblings().children(".dropdown_fullwidth").stop(true).fadeTo("slow", 0, function() { this.style.display = 'none'; });
 jQuery(this).children(".dropdown_fullwidth").stop(true).fadeTo("slow", 1).css('display', 'block');
        },
        function() { jQuery(this).children(".dropdown_fullwidth").stop(true).fadeTo("slow", 0, function() { this.style.display = 'none'; });
 });
});    
</script>

Ok, well I’m glad you’ve got it working.
thanks for taking the time to report back :slight_smile: