Javascript navigation to stay on corosponding page.

[oliver2601]

I've currently got a javascipt navigation which uses jQuery,

My problem is that the "sliding box" doesn't rest on the corosponding page.

Here's the following code for the html and css, could anybody have a look for me?



</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 1200,
click: function(event, menuItem) {
return true;
}
});
});
</script>
<style type="text/css">




<li class="current"><a href="Index.html">Home</a></li>
<li><a href="Maintenance.html">Maintenance</a></li>
<li><a href="Troubleshooting.html">Troubleshooting</a></li>
<li><a href="Contact.html">Contact Us</a></li>




.lavaLampNoImage {
position: relative;
height: 35px;
width: 421px;
overflow: hidden;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-left: 15px;
}
.lavaLampNoImage li {
float: left;
list-style: none;
}
.lavaLampNoImage li.back {
background-color: #0099FF;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampNoImage li a {
font:12px arial;
text-decoration: none;
color: #333;
text-align: center;
top: 7px;
letter-spacing: 0;
z-index: 10;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin-left: 10px;
margin-right: 10px;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
border: none;
}