a href not working

I'm trying to make a menu in this style with the same code: http://www.jeremymartin.name/examples/kwicks.php?example=1

I added the links and they're not working. Why are they not?

Here's my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css" />

        <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
        <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>

        <script type="text/javascript">
            $().ready(function() {
                $('.kwicks').kwicks({
                    max : 220,
                    spacing : 5
                });
            });
        </script>
    </head>

    <body>
        <ul class="kwicks horizontal" >
            <li id="kwick_1" a href="#"></a></li>
            <li id="kwick_2" a href="#"></a></li>
            <li id="kwick_3" a href="#"></a></li>
            <li id="kwick_4" a href="#"></a></li>
        </ul>
    </body>
</html>

Solution

Your HTML is invalid. The li is not closed and the a tag is not opened.

This is what it should be:

        <li id="kwick_1"> <a href="#"></a></li>
        <li id="kwick_2"> <a href="#"></a></li>
        <li id="kwick_3"> <a href="#"></a></li>
        <li id="kwick_4"> <a href="#"></a></li>