Image under nav making links not clickable.

[elanspark]

For some reason the links are not clickable unless it's in Internet Explorer. I tried giving it a smaller z-index and I even double check for any conflicts but I just can not get this to work. I'm sure it's because on the nav but I honestly have no idea how to work around that? I have the code set as so:\[code\] /* Navbar BG Big */.image { position: relative; margin-right: auto; margin-left: auto; height: auto; width: 100%; /* for IE 6 */ background-image: url(../images/headerbg.png); background-repeat: repeat-x; text-align: center;}/* Navbar BG Small */@media all and (max-width: 1200px) { .image { background-image: url(../images/spacer.gif);} }/* Logo Styles */@media all and (max-width: 800px) { #big-logo { display: none; position: relative; z-index: -999;}}@media all and (min-width: 800px) { #small-logo { display: none; position: relative; z-index: -998;}}/* Small Nav */@media all and (max-width: 900px) { nav ul { list-style-image: none; list-style-type: none; width: 100%; position: absolute; margin-bottom: 2em;}nav ul li { display: inline; text-align: center; margin-right: .5em; margin-left: .5em;}}/* Big Nav */@media all and (min-width: 900px) { nav ul { list-style-image: none; list-style-type: none; width: 100%; position: absolute; margin-bottom: 2em; margin-top: .4em;}nav ul li { display: inline; text-align: center; margin-right: 0.5em; margin-left: 0.5em;}}.navtext:link, .navtext:visited { color: #FFFFFF; text-decoration: none; font-size: 1em; text-shadow: 1px 1px 1px #333; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; display: inline-block; letter-spacing: 0.2em; margin-top: 0.5em; margin-bottom: 0.5em; padding-right: 2em; font-style: normal;} .navtext:hover { color: #FFFFFF; text-shadow: 1px 1px 2px #00c4ff; text-decoration: none;} \[/code\]HTML\[code\] <!-- logo & nav !--><div class="image"> <nav><ul> <li><a href="http://stackoverflow.com/questions/14074061/#" class="navtext">Home</a></li> <li><a href="http://stackoverflow.com/questions/14074061/#" class="navtext">About</a></li> <li><a href="http://stackoverflow.com/questions/14074061/#" class="navtext">Services</a></li> <li><a href="http://stackoverflow.com/questions/14074061/#" class="navtext">Portfolio</a></li> <li><a href="http://stackoverflow.com/questions/14074061/#" class="navtext">Product</a></li> <li><a href="http://stackoverflow.com/questions/14074061/#" class="navtext">Store</a></li> <li><a href="http://stackoverflow.com/questions/14074061/#" class="navtext">Support</a></li> <li><a href="http://stackoverflow.com/questions/14074061/#" class="navtext">Contact</a></li> </ul> <ul> <li><div id="spacer"></div> <!-- big logo !--><img src="http://stackoverflow.com/questions/14074061/images/headerlogo.png" alt="ETV Software" id="big-logo" border="0"/> </li> </ul> </nav> <!-- navdrop image here !--><img src="http://stackoverflow.com/questions/14074061/images/navdrop.png"/> <!-- small logo !--> <img src="http://stackoverflow.com/questions/14074061/images/headerlogo.png" alt="Etv Software" id="small-logo" border="0"/> </div>\[/code\]JSFiddle of the code above