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



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:

Code:
  <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:
Code:
.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;
}