link not working HTML/CSS

Question

I know its a stupid question, but I've been trying to find what causes the error

I created a site, however, links in content is not working. i know it's somewhere in the css file but i can't find out what

this is the draft, i removed some parts in the main html, but the css are as ease

  var firstreel=new reelslideshow({ wrapperid: "myreel", //ID of blank DIV on page to house Slideshow dimensions: [750, 550], //width/height of gallery in pixels. Should reflect dimensions of largest image imagearray: [ ["images/a.jpg"], //["image_path", "optional_link", "optional_target"] ["images/b.jpg"], ["images/c.jpg"], ["images/d.jpg"], ["images/e.jpg"], ["images/f.jpg"], ["images/g.jpg"], ["images/h.jpg"] //<--no trailing comma after very last image element! ], displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true}, orientation: "h", //Valid values: "h" or "v" persist: true, //remember last viewed slide and recall within same session? slideduration: 300 //transition duration (milliseconds) }) 

  body { background: url(images/cheeseclothBG.jpg)no-repeat center center fixed; font-family: Avenir !important; font-size: 12pt; line-height: 20px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #header { background: url(images/header.jpg) no-repeat; min-height: 270px; overflow: hidden; background-size: 100%; } #content { float: left; width: 100%; margin-top: -101px; background: #fff; z-index:-1; position:relative; } #img { margin: 5px; padding: 5px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } #img img{ display: inline; margin: 5px; border: 1px solid #ffffff; } #desc{ text-align: center; font-weight: normal; width: 120px; margin: 5px; } #container { width: 826px; margin: 0 auto; box-shadow: 0 0 5px 1px #ccc; } #menu{ margin:0; padding:0; } #menu ul{ margin:0; padding:0; line-height:30px; margin-left:35px; margin-top: 139px; } #menu li{ margin:0; padding:0; list-style:none; float:left; position:relative; background:#fff; } #menu ul li a{ text-align:center; font-family:"Comic Sans MS", cursive; font-size:12px; text-decoration:none; height:30px; width:150px; display:block; color:#000; margin-left:10px; text-shadow:1px 1px 1px #999; } #menu ul li{ text-align:center; font-family:"Comic Sans MS", cursive; font-size:12px; text-decoration:none; height:30px; width:150px; display:block; color:#000; text-shadow:1px 1px 1px #999; } #menu ul li ul li a{ text-align:center; margin-left:0px; } #menu ul li ul{ margin-top:-5px; } #menu ul li ul li{ margin-top:-2px; margin-left:-35px; position:relative; z-index:3px; } #menu ul ul{ position:absolute; visibility:hidden; top:32px; z-index:10px; } #menu ul li:hover ul{ visibility:visible; } /*******************************/ #menu li:hover{ text-decoration:underline; } #menu ul li:hover ul li a:hover{ text-decoration:underline; color:#fa9a2a; } #menu a:hover{ color:#fa9a2a; } #menu ul li:hover { color:#fa9a2a; } .clearFloat{ clear:both; margin:0; padding:0; } #content p { margin: 30px 30px; } #footer { background: url(images/footer.jpg); min-height: 146px; background-size: 100%; clear: both; } #fmenu ul { padding: 0; margin-top: 120px; padding-top: 19px; } #fmenu ul li { display: inline-block; } #fmenu ul li a { font-size: 14px; font-weight: bold; padding: 1px 14px 0; margin-top: 0px; color: #000000; } #fmenu p { /**margin-top: 120px; margin-left: 480px; display: inline-block; width: 310px; font-size: 11px; color: #000; text-align: right;**/ width:70%; color:#FFFFFF; font-size: 8pt; padding-left:10px; padding-top:10px; display:inline-flex; margin-top: 110px; } #fmenu img{ width:36px; height:36px; } #fmenu ul.social_icons, li.social { margin-top:40px; padding-left:5px; padding-right:5px; max-width:25%; list-style: none; float:right; text-decoration:none; display:inline-block; position: relative; } #mainTxt p{ margin: 40px 100px; } #overview h2{ font-family: Open Sans Condensed, !important; text-shadow: 2px 2px 8px #9d9b9b; font-size: 26px; } #overview h1{ font-family: Impact, !important; font-size: 46px; } #overview h4{ font-family: Gabriola, !important; font-size: 26px; color: #e2705a; margin-top: -20px; } #overview h3{ font-family: Sacramento, !important; font-size: 36px; margin-top: -20px; } #overview h5{ font-family: Open Sans Condensed, !important; font-size: 21px; margin-top: -20px; } #reviews table th td{ border: 1px solid black; } #reviews h5{ font-family: Open Sans Condensed, !important; font-size: 18px; text-align:center; } #reviews h2{ font-family: Open Sans Condensed, !important; text-shadow: 2px 2px 8px #9d9b9b; font-size: 26px; } #reviews h3{ font-family: Sacramento, !important; font-size: 26px; font-weight:bold; } #usage h1{ font-family: Cookie, !important; font-size: 46px; float:left; } #usage img{ width: 250px; height: 250px; } #about p{ font-family: Georgia, !important; font-size: 18px; font-style: italic; text-align: justify; } #about2 p{ font-family: Avenir, !important; font-size: 16px; width:600px; } #about2 ul{ width:600px; } #about2 li{ font-family: Avenir, !important; font-size: 14px; width:600px; text-align: left; } **html** <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Our </title> <link href="style2.css" rel="stylesheet" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.touchSwipe.min.js"></script> <style type="text/css"> #myreel{ /*sample CSS for demo*/ border:15px solid black; } .paginate{ width: 330px; margin-top:5px; font:bold 14px Arial; text-align:center; } 

  <div id="container"> <!--wrapper--> <header id="header"> <div id="menu" class="menu"> <!--navMenu--> <ul> <li><a href="test.php" > HOME </a></li> <li>OUR PRODUCT <ul> <li><a href="productOverview.php" > PRODUCT OVERVIEW</a></li> <li><a href="usage.php" > CHEESECLOTH USAGE</a></li> <li><a href="reviews.php" > PRODUCT REVIEWS </a></li> </ul> </li> <li> SUGGESTIONS <ul> <li><a href="tips.php" > TIPS and IDEAS </a></li> <li><a href="recipe.php" > RECIPES </a></li> <li><a href="ideas.php" > SEND US YOUR IDEAS </a></li> </ul> </li> <li><a href="about.php" > ABOUT US </a> </li> <li><a href="contact.php" > CONTACT US </a> </li> </ul> <br class="clearFloat" /> </div> </header> <section id="content"> <a href="#" target="_blank"> <img src="images/wantBtn.png" style="display:inline; margin: 50px auto; margin-top: 2em;"/> </a> </section> <footer id="footer"> <div id="fmenu" class="fmenu"> <p>©2015 copyright | All Rights Reserved</p> <ul class="social_icons"> <li class="social"> <a href="http://www.facebook.com/" target="_blank"> <img src="images/fb.png" /> </a></li> <li class="social"> <a href="https://www.pinterest.com/" target="_blank"> <img src="images/pin.png" /> </a></li> <li class="social"> <a href="https://instagram.com/" target="_blank"> <img src="images/insta.png" /> </a></li> </ul> </footer> </div> </div> 

Answer 1

Its the z-index:-1 for #content , remove it, also I don't see it for any reason. Your content lie below header tag, disabling link. I hope this helps.