Menú animado Jquery

<!DOCTYPE html>

<html>
<head>
    <title>Menú Animado</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script>

    <style>
        #menu{
            font-size: 2em;
        }

        #menu ul{
            padding: 0;
            margin: 0;
        }

        #menu li{
            display: inline;
            padding:0;
            margin: 0;
        }

        #menu a{
            padding: 5px;
            text-decoration: none;
        }

        #sombra{
            position: absolute;
            top: 0;
            background-color: green;
            z-index: -1;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("<div id='sombra'></div>").css({
                width:0,
                height: $("#menu a").height()+10
            }).appendTo("#menu");

            //FUNCION PARA ANIMAR LA SOMBRA CUANDO SE
            //PASE EL MOUSE SOBRE LOS "a" DE LOS "li"
            $("#menu a").hover(function(){
                $("#sombra").animate({
                    width:$(this).width() +10,
                    left:$(this).position().left
                },
                {
                    duration:"medium",
                    easing:"easeOutElastic",
                    queue:false
                });
            });
        });
    </script>
</head>
<body>
<div id="menu">
    <ul>
        <li><a href="">INICIO</a></li>
        <li><a href="">NOTICIAS</a></li>
        <li><a href="">FORO</a></li>
        <li><a href="">BLOG</a></li>
    </ul>
</div>
</body>
</html>