jquery – code not functioning while using Chrome



hi there,

Please help me, I have an issue-

Have engaged a subnav and subsubnav with the subsequent code.

Now It functions well in every well-liked browsers as preferred, apart from in Chrome (newest edition), that don't unlock subnav-2.

Have been trying out a few means but in vain.

In fact , classes subnav-1 and subnav-2 are li elements.

Kindly let me know where is the issue out here.

$(function() {
 
 
      $('.subnav-1 ul, .subnav-2 ul').hide();
 
 
      $('.subnav-2').children('ul').css('width', 'auto'); // removes the defined width in CSS
 
      $('.subnav-1').hover(function() {             $(this).children('ul').hide().delay(200).fadeIn(200);
      },
      function() {
            $(this).children('ul').fadeOut(400);
      });
 
      $('.subnav-2').hover(function() {
            $('.subnav-2').each(function () {
                  var w = $(this).children('ul').innerWidth();                   $(this).children('ul').css({left: '-'+ w +'px'});
            });
 
            $(this).children('ul').hide().delay(200).fadeIn(200);             $(this).children('span').css({'color': '#fff', 'background': '#7fabb7'});
      },
      function() {
            $(this).children('ul').fadeOut(400);             $(this).children('span').css({'color': '', 'background': ''});
      });
});

Thank you for any answers!