jQuery vertical dropdown menu easing

Question

I have made a vertical dropdown menu(width 100%)

And when the mouse cursor hover on the Red Section,

Sub menu(width 100%) has to be shown like drop down... (Gray BG Section)

but it doesn't work and I can't figure it out what is wrong ....

Can anyone can help me please?

Here is demo...

http://fiddle.jshell.net/B3tZj/

$(document).ready(function () {   
    $("#gnbMenu").hover(
      function () {$('#subWrap').animate({height: "show"}, 300, "easeInOutCubic");}, 
      function () {$('#subWrap').hide();}
    );
}); 

Error: Uncaught TypeError: Object # has no method 'easeInOutCubic'

Answer 1

You animation is throwing a error with easing easInOutCubic.

Use this:

function () {$('#subWrap').animate({height:"show",easing:"easeInOutCubic"}, 300)}, 

instead of:

function () {$('#subWrap').animate({height: "show"}, 300, "easeInOutCubic");},

Demo here (your code corrected)

You could use .slideUp() / .slideDown():

$(document).ready(function () { 
    $("#gnbMenu").hover(
      function () {$('#subWrap').slideDown();}, 
      function () {$('#subWrap').slideUp();}
    );   
}); 

Demo here (suggestion with slideup/slidedown)

EDIT:

Sugeestion to you question on comments:

$(document).ready(function () {
    $("#gnbMenu").on('mouseenter', function () {
        $('#subWrap').slideDown();
    });
    $("#subWrap").on('mouseleave', function () {
        $('#subWrap').slideUp();
    });
});

Demo here

NOTICE: This demo uses .on(), which need jQuery 1.7+