Can't click links due to overlapping divs - html

Question

I have some overlapping divs in my design and my links are not clickable. I know the reason the links aren't clickable is because of said overlapping divs, so I assigned some z-indexes to try and combat that. However, I notice I can only make the links clickable by making the parent div (the one containing the div that actually houses my text) the highest z-index element... Which totally breaks my design and the way it looks. Is there a different way around this that I am not noticing? Or is this a case of having to redo the design completely?
The link to the journal skin I am working on.
I also want to throw a little edit in there mentioning that the side branches housed in the branchoverlay div are intended to overlap the other divs a little bit, see here. I have heard suggestions of removing them from their own div and putting them in the background of contentholder, but that would ruin that effect I think? Is there a better way to format that header/dropdown area to accomplish that slight overlay of the divs without having to do so much overlapping via negative margins?
HTML:
<div class="text"><div class="body">
<div class="menu"><div class="dropdowncontainer"><div class="dropdown">
<span><img src="https://s18.postimg.org/i8xcnc8gp/home.png"></span>
<div class="dropdown-content">
Bacon
Ribs
Steak
</div>
</div><div class="dropdown">
<span><img src="https://s9.postimg.org/iw9covwu7/guide.png"></span>
<div class="dropdown-content">
Bacon
Ribs
Steak
</div>
</div><div class="dropdown">
<span><img src="https://s12.postimg.org/aa9pluszh/resources.png"></span>
<div class="dropdown-content">
Bacon
Ribs
Steak
</div>
</div></div>
</div><div class="branchoverlay"></div><div class="contentholder">
<div class="maindiv"><p>Welcome and thank you for your interest in joining Hvalla, the following links have been provided for your convenience.
<h3>Required Reading</h3>
» The Rules — While you are not expected to commit these to memory, they are a required read.
» Setting and World Lore — An in-depth look at the world of Hvalla, from locations to the packs that inhabit it.
» Character Creation — All information pertaining to the creation of your character.
» How to Join — A detailed overview of the current joining process.
» Currency — An in-depth guide of Runestones and how to utilize them.
» FAQ — All frequently asked questions.
<hr>
<b>Core Concepts:</b>
<ul><li><span>Hvalla is a semi-realistic wolf art and roleplay community. Our goal is to stretch the boundaries of realism in a tasteful way, encouraging a more mature form of creativity in wolf RP. </span></li></ul><ul><li><span>We strive to provide a community that is inclusive and close-knit; no one should ever feel excluded, railroaded or otherwise on the fringes of a clique of close friends.</span></li></ul><ul><li><span>Characters in Hvalla may exhibit humanized aspects such as facial expressions and verbal communication similar to media such as Princess Mononoke, </span>The Jungle Book<span>, </span>Savva<span> etc., but overall should exhibit realistic behavior. </span></li></ul><ul><li><span class="bbcode_bold">Hvalla explores themes that are ideologically sensitive in nature.</span><span> We are always excited to involve new members in the community, however, if you find the exploration of dark themes such as murder, war, pillaging, abuse etc., to be outside of your comfort zone or you find yourself easily offended by aforementioned subjects, Hvalla may not be the community for you. Remember, this is creative writing, not real life.</span>
</li></ul></p></div></div>
<div class="rockfooter"></div> </div></div>
CSS:
/*BODY*/
.gr-body {
background: url(http://orig14.deviantart.net/8b57/f/2016/279/f/5/frontpagebackground_by_wulfghast-dak5apt.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-color: #1c1119;
color: #545454;
}
.gr-top{
border: none;
margin: -5px 0px -10px 0px;
}
.gr-top img {
display: none;
}
h2 {
display: none;
}
.gr-top span {
display: none;
}
.tri {
display: none;
}
.gr1, .gr2, .gr3 {
display:none;
}
.bottom {
display: none;
}
.text {
margin-bottom: -38px;
padding: 0;
}
/*TEXT*/
p {
color: #3c281f;
font-family: 'montserrat', sans-serif;
font-size: 15px;
line-height: 1.4;
margin: 20px;
}
/*MENU AREA*/
.menu {
width: 64%;
height: 171px;
margin-left: auto;
margin-right: auto;
margin-top: 18%;
padding-left: 10%;
background: url('http://s15.postimg.org/zby726h7v/header.png');
background-repeat: no-repeat;
background-position: top-center;
background-size: 100% 70%;
position: relative;
z-index: 3;
}
.branchoverlay {
width: 74%;
height: 694px;
margin-left: auto;
margin-right: auto;
margin-top: -53px;
background: url('http://s15.postimg.org/n6ayvyzrd/branchoverlay.png');
background-repeat: no-repeat;
background-position: top-center;
background-size: 100% 70%;
position: relative;
z-index: 2;
}
.dropdowncontainer {
height: 30px;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.dropdown {
position: relative;
display: inline-block;
width: 23%;
text-align: center;
margin-top: 30px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4a463b;
min-width: 120px;
padding-bottom: 20px;
}
.dropdown-content a {
color: #ffffff;
line-height: 2.5;
}
.dropdown-content a:hover {
color: #000000;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*CONTENT*/
.contentholder {
width: 68%;
margin-left: auto;
margin-right: auto;
margin-top: -735px;
-moz-box-shadow: 0 20px 20px 5px #0a0a0a;
-webkit-box-shadow: 0 20px 20px 5px #0a0a0a;
box-shadow: 0 20px 20px 5px #0a0a0a;
background-color: #50463b;
position: relative;
z-index: 1;
}
.maindiv {
width: 85%;
margin-top: 4%;
margin-left: 5%;
margin-bottom: 400px;
position: relative;
z-index: 5;
padding: 20px 20px 20px 20px;
display: inline-block;
}
/*FOOTER*/
.rockfooter {
background: url(http://s17.postimg.org/is79jxd3z/footer3_by_wulfghast_dakd92b_1.png);
height: 1000px;
width: 100%;
background-position: bottom;
background-repeat: no-repeat;
background-size: contain;
margin-left: auto;
margin-right: auto;
margin-top: -1100px;
position: relative;
z-index: 4;
}
/*RESPONSIVE MOBILE*/
.da-media[mobile] .menu {
width: 74%;
padding-left: 0%;
}
.da-media[mobile] .dropdown {
margin-top: 35px;
width: 31%;
}
.da-media[mobile] .maindiv {
margin-left: 1%;
}
.da-media[mobile] .rockfooter {
margin-top: -1300px;
}
Thanks for any help and suggestions anyone can give!

Answer 1

You got z-index:4 causing your div into front try making it to 1 or remove your margin-top
body div#devskin13122897 .rockfooter {
background: url(http://s17.postimg.org/is79jxd3z/footer3_by_wulfghast_dakd92b_1.png);
height: 1000px;
width: 100%;
background-position: bottom;
background-repeat: no-repeat;
background-size: contain;
margin-left: auto;
margin-right: auto;
margin-top: -1100px;
position: relative;
z-index: 1;

Answer 2

Please remove the branchoverlay div which is just used to hold a background image and add the image in contentholder class
background: #50463b url(http://s15.postimg.org/n6ayvyzrd/branchoverlay.png);
Check this url: jsfiddle.net/pfayap45