list link appears on the footer

I have the last link on the top navbar "image4" that appears on all the footer. So where ever I mouse over on the footer the hyperlink of the last <li> item wants to trigger.

For some reason it looks like image4 link goes all the way down to the footer. If I remove the image4 <li> item, image3 is then the new link that can be triggered from anywhere in the footer.

How do i solve this?

My code is as follows:

HTML:

</head>

<body>
    <div id="wrapper">

        <div id="nav">  
            <ul>
                <li><a href="http://www.com/" target="blank" class="image1"><img alt="#" src="image1.png" /></li>
                <li><a href="http://www.com/" target="blank" class="image2"><img alt="#" src="image2.png" /></li>
                <li><a href="http://www.com/" target="blank" class="image3"><img alt="#" src="image3.png" /></li>
                <li><a href="http://www.com/" target="blank" class="image4"><img alt="#" src="image4.png" /></li>
            </ul>
        </div><!-- end of the nav -->

        <div id="content">
            <img alt="#" class="image5" src="image5.png" />
            <img alt="#" class="image6" src="image6.png" />
        </div><!-- end of the content -->

    </div><!-- end of the wrapper -->
</body>

<footer>
    <img class="logo" alt="#" src="logo.png" />
    <p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p>
</footer>

</html>

CSS:

*{
    margin: 0px;
    padding: 0px;
}

body {
    margin: 0px;
    background: url('images/bg.png') repeat-x;
    background-color: #ffffeb;
}

#nav {
    float: left;
    width: 1024px;
    height: 732px;
    display: block;
    margin: 5px 0 0 200px;
}

ul {
    list-style: none;
    width: 420px;
    margin: 0 auto;
}

li {
    float: left;
}

.image5 {
    position: absolute;
    top: 0px;
    left: 200px;
    z-index: -1;
}

.image6 {
    position: absolute;
    top: 375px;
    left: 200px;
    z-index: -1;
}

footer {
    height: 30px;
    position: relative;
    top: 715px;
}

.logo {
    position: absolute;
    left: 230px;
    top: 0px;
}

p {
    font-family: helvetica, arial, sans serif;
    font-size: 12px;
    color: #aaaaaa;
    text-decoration: none;
    position: absolute;
    left: 940px;
    top: 0px;
    padding: 5px;
}

Solution

        <head>
        </head>

        <body>
            <div id="wrapper">

                <div id="nav">  
                    <ul>
                        <li><a href="http://www.com/" target="blank" class="image1"><img alt="#" src="image1.png" /> </a></li>
                        <li><a href="http://www.com/" target="blank" class="image2"><img alt="#" src="image2.png" /></a></li>
                        <li><a href="http://www.com/" target="blank" class="image3"><img alt="#" src="image3.png" /></a></li>
                        <li><a href="http://www.com/" target="blank" class="image4"><img alt="#" src="image4.png" /></a></li>
                    </ul>
                </div><!-- end of the nav -->

                <div id="content">
                    <img alt="#" class="image5" src="image5.png" />
                    <img alt="#" class="image6" src="image6.png" />
                </div><!-- end of the content -->

           <footer>
            <img class="logo" alt="#" src="logo.png" />
            <p>© 2012<?php echo date('Y'); ?> logo studio. All rights reserved.</p>
           </footer>

            </div><!-- end of the wrapper -->



        </body>



        </html>