Links not clickable but link exists

hi, whenever i hover over the images on my navigation bar, the links do appear to be there but when i click on them..it wont click :S

http://i52.tinypic.com/5w9ws8.png

this is the navigation, when you click on an item and i presume its that blue line with jquery that is causing it, maybe in the css...

Html:

<ul class="lavaLampBottomStyle" id="3">
<li class="navibg" style="width:80px;">
<a href="#">Home
<br style="padding-bottom:5px;">
<span class="navidescription">
welcome to cw
</span>
</a>
</li>

<li class="navibg" style="width:110px;">
<a href="http://citywater.uk.com/contact-us/">Contact Us
<br style="padding-bottom:5px;">
<span class="navidescription">
how to reach us
</span>
</a>
</li>

<li class="navibg" style="width:95px;">
<a href="http://citywater.uk.com/about-us/">About us
<br style="padding-bottom:5px;">
<span class="navidescription">
read about us
</span>
</a>
</li>

<li class="navibg">
<a href="http://citywater.uk.com/latest-news/">Latest News
<br style="padding-bottom:5px;">
<span class="navidescription">
water treatment news
</span>
</a>
</li>
</ul>

CSS:
.lavaLampBottomStyle {
float :right;
list-style :none;
margin-top :20px;
padding :0;
margin-bottom:24px;
}

.lavaLampBottomStyle li {
border-bottom : 5px solid white;
float : left;
list-style : none;
padding-bottom :30px;
padding-left :25px;
padding-top :10px;
position :relative;
vertical-align :top;
}

.lavaLampBottomStyle li.back {
border-bottom : 5px solid #88B8E8;
height : 1px;
position : absolute;
margin-top:39px;
width : 9px;
z-index : 8;
}

.lavaLampBottomStyle li a {
color : white;
float : left;
font : bold 15px arial;
height : 40px;
letter-spacing : 0;
outline : none;
padding-right :5px;
position : relative;
text-align : center;
text-decoration : none;
text-transform : uppercase;
top : 7px;
z-index :10;
}

.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border : none;
}

Have you got it sorted? Or can we have a link to your page?

It is working here in my browsers

its on a localhost and no its not sorted yet...

its on a localhost and no its not sorted yet...


Try to test in FF or IE

not working with IE, chrome, firefox :(

some CSS was covered with link

here on my OC... in FF5 ... its fine and in IE too....

Try 2 clear browser history and try.. else... create a new HTML with diff name and copy all code there....

do you think its cause of the javascript??

lavalamp.js
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});

return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

$li.not(".back").hover(function() {
move(this);
}, noop);

$(this).hover(noop, function() {
move(curr);
});

$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});

setCurr(curr);

function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};

function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};

});
};
})(jQuery);



lavalamp-min.js

(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e ){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o. speed,o.fx)}})}})(jQuery);

Try if it is working without Js... if it will work, then It can be issue of js

Hi website is live now

http://citywater.uk.com/

I did disable javascript and it worked perfectly, however i got the same effect going at the bottom! that is working perfectly but the top is not working :(

help :(

for top you can write your custom jquery :)