How to make links in a Javascript "slide out" menu work

Question

I have created a very simple website using Jquery and CSS.

There is a navigation menu on the left hand side. Each menu item links to an external website. Unfortunately, these links do not actually WORK!

What am I missing?? I am very new to JS.

Here is the JS:

    <script type='text/javascript'>
    $(document).ready(function(){
    $('#slideout').hover(function() {screen
    $(this).animate({right:'0px'}, {queue:false, duration: 500});
    }, function() {
    $(this).animate({right:'-270px'}, {queue:false, duration: 500});
    });
    });
    </script>

Here is the HTML:

    <div id="slideout">
         <div id="slidefont">selected works</div>
            <div id="slideout_inner">
            <ul>
            <li>
            <a href="http://websitegoeshere.com" target="blank">test1</a>
            </li>
            <li>
            <a href="http://websitegoeshere2.com" target="blank">test2</a>
            </li>
            </ul>
            </div>
    </div>

Answer 1

You can do this without javascript only need to add css like this

li a:hover {
    padding-left: 10px;
}

With jquery You have to add this

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>


   <script type='text/javascript'>
   $("li a").hover(function() {
        $(this).stop().animate({paddingLeft : "10px"},200);
    },function() {
        $(this).stop().animate({paddingLeft : "0px"},200);
    });
   </script>

DEMO