left-menu with jquery animate sample 1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>lenft menu</title>
<style>
    #menu { width:200px;  }
    #menu ul { padding:0; list-style:none; }
    #menu ul li { width:200px; height:30px; overflow:hidden;}
    #menu ul li:hover { border-bottom:2px solid #369;}
    #menu ul li div { float:left; height:30px;line-height:30px; }
    #menu ul li div.menutext { width:150px; }
    #menu ul li div.arrow { display:none; width:20px; color:#f00; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <div id="menu">
        <ul>
            <li>
                <div class="menutext">MENU - 1</div>
                <div class="arrow">→</div>
            </li>
            <li>
                <div class="menutext">MENU - 2</div>
                <div class="arrow">→</div>
            </li>
            <li>
                <div class="menutext">MENU - 3</div>
                <div class="arrow">→</div>
            </li>
            <li>
                <div class="menutext">MENU - 4</div>
                <div class="arrow">→</div>
            </li>
        </ul>
    </div>
    <script>
        $("#menu ul li").hover(
            function(){
                $(this).animate({paddingLeft:10});
                $(this).children(".menutext").animate({marginLeft:"10px"});
                $(this).children(".arrow").show();
            },
            function(){
                $(this).children(".menutext").animate({marginLeft:"0"});
                $(this).children(".arrow").hide();
            }
        );
    </script>
</body>
</html>