For some reason the alink doesn't go to the link when clicked on. It recognizes it on hover, but nothing happens when clicked. Any suggestions? Couuld it be in the CSS? The page link is http://www.kerrydean.ca/new_layout
.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
height: 18px;
}
ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}
ul li {
list-style: none;
float:left;
text-align: center;
}
ul li a {
padding: 0 20px;
text-align: center;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
}
.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
<div id="Navigation">
<div class="lavalamp" >
<ul>
<li class="active"><a href="blog.php">Blog</a></li>
<li><a href="leaders.html">Leaders</a></li>
<li><a href="webinars.html">Webinars</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="http://theglobalpartnersgroup.com/gpg-events">Global Partners</a></li>
<li><a href="contact.html">Contacts</a></li>
<li><a href="http://www.kerrydeanchocolate.com">Opportunites</a></li>
</ul>
<div class="floatr"></div>
</div> <!--End of lavalamp -->
</div> <!-- end of navigation -->