Links in Fixed Footer not clickable - html

Question

I am working on an site where I made an fixed footer which I never did before. I got the basic code from this tutorial: http://tutorialzine.com/2013/08/slideout-footer-css/ the links work in there but as my site also got an Fixed header It messes up a bit. The links arent hoverable or clickable. How can I make my links clickable It is not that they worked when I even copyd the code in to check if the links would work then they didnt either.
Header:
<header>
<nav>
<div class="FSG-box">
<img id="FSG-logo" src="imgs/FSG.png"/>
</div>
<ul class="menu">
<li><strong>Home</strong></li>
<li>partners</li>
<li>education</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<section id="intro">
<div class="transparent">
</div>
<div class="boxhome">
<h1>Welcome at the Food Safety Group</h1>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</section>
</header>
Header CSS:
section {
overflow: hidden; height: 900px;
}
nav{
width: 100%;
height: 100px;
background-color: #f4f4f4;
left: 0;
top: 0;
position: fixed;
z-index: 10000;
}
.menu{
float: right;
position: relative;
right: 100px;
top:15px;
}
.menu li:hover
{
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
.menu li{
color: #000;
font-weight: 300;
list-style: none;
text-decoration: none;
float: left;
margin-left: 25px;
font-size: 18px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
#FSG-logo{
position: absolute;
top:13px;
left:13px;
max-width:450px;
}
.transparent {
position: absolute;
background-color: #000;
opacity: 0.625;
filter: alpha(opacity=60); /* For IE8 and earlier */
width: 100%;
height: 100%;
}
.boxhome:hover{
-webkit-transform:scale(1.05);
transform:scale(1.05);
height: 100%;
}
.boxhome {
width:100%;
margin:0 auto;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
#intro {
z-index: 10;
/* sets it above .slide1 */
/* this pushes it below .slide1 in the scroll */
min-height:1100px;
max-height: 1200px;
position: absolute;
width: 100%;
left: 0;
top:0;
background: url(../imgs/kassen.jpg);
}
#intro h1 {
font-size: 36pt;
text-align:center;
position: relative;
font-weight: 400;
top:320px;
}
Footer + Div above HTML:
<article class="result">
<div class="transparent2">
</div>
<div class="power">
<h2>The result of a well organized group</h2>
<h3>The six partners in this group can supply all automation required to produce a plant, harvest the product and supply the product safe and sound to the supermarket.</h3>
</div>
</article>
<footer>
<ul>
<li>
<p class="home">Where to Find Us</p>
<ul>
<li>Visser Horti Systems</li>
<li>Postoffice box 5103</li>
<li>3295 ZG 's-Gravendeel</li>
<li>The Netherlands</li>
</ul>
</li>
<li>
<p class="services">Sign up for our News Letter</p>
<ul>
<li>3D modeling</li>
<li>Web development</li>
<li>Mobile development</li>
<li>Web & Print Design</li>
</ul>
</li>
<li>
<p class="reachus">Reach us</p>
<ul>
<li><a style="cursor: pointer;" href="http://www.google.com/maps/ms?ie=UTF8&hl=nl&msa=0&msid=117943608112586518975.00000111c1da021ca60eb&om=1&t=h&z=17&ll=51.787568" target="_blank">Google Maps</a></li>
<li>Phone: [phone]</li>
<li>Fax: [phone]</li>
<li>info#visser.eu</li>
</ul>
</li>
</ul>
</footer>
Footer CSS:
.result {
min-height: 750px;
width: 100%;
left: 0px;
position: absolute;
background: url('../imgs/result.jpg') no-repeat scroll center center transparent;
top: 2830px;
z-index:1;
}
footer{
height:400px;
width: 100%;
position: relative;
z-index:-2;
background-color: #303030;
}
footer > ul{
width:50%;
position:fixed;
left:50%;
bottom:0;
margin-left:-480px;
padding-bottom: 200px;
z-index:-1;
}
footer > ul > li{
width:33.3%;
float:left;
}
footer ul{
list-style: none;
}
/* The links */
footer > ul > li ul li{
text-transform: uppercase;
font-weight:bold;
line-height:1.8;
}
footer > ul > li ul li a{
text-decoration: none !important;
color: #fff !important;
}
footer > ul > li ul li a:hover{
color:#fff !important;
}
footer a.logo{
color: #fff !important;
text-decoration: none !important;
font-size: 14px;
font-weight: bold;
position: relative;
text-transform: uppercase;
margin-left: 16px;
display: inline-block;
margin-top: 7px;
}
footer a.logo i{
font-style: normal;
position: absolute;
width: 60px;
display: block;
left: 48px;
top: 18px;
font-size: 12px;
color: #fff;
}
footer a.logo:before{
content: '';
display: inline-block;
background: url('../img/sprite.png') no-repeat -19px -70px;
width: 48px;
height: 37px;
vertical-align: text-top;
}
footer p{
width: 90%;
margin-right: 10%;
padding: 9px 0;
line-height: 18px;
background-color: #058cc7;
font-weight: bold;
font-size: 14px;
color:#fff;
text-transform: uppercase;
text-shadow: 0 1px rgba(0,0,0,0.1);
box-shadow: 0 0 3px rgba(0,0,0,0.3);
margin-bottom: 20px;
opacity:0.9;
cursor:default;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
footer > ul > li:hover p{
opacity:1;
}
footer p:before{
content: '';
display: inline-block;
background: url('../img/sprite.png') no-repeat;
width: 16px;
height: 18px;
margin: 0 12px 0 15px;
vertical-align: text-bottom;
}
footer p.home{
background-color: #F58020;
}
footer p.home:before{
background-position: 0 -110px;
}
footer p.services{
background-color: #F58020;
}
footer p.services:before{
background-position: 0 -129px;
}
footer p.reachus{
background-color: #F58020;
}
footer p.reachus:before{
background-position: 0 -89px;
}

Answer 1

z-indexon all divs like the .result fixed the problem