Dropdown menu hiding behind content? - html

Question

so I'm new to this and have been trying to put in a dropdown menu on a theme I found online. I've gotten it to work for the most part, however, the dropdown menu is hiding behind the main content. I know this is the problem because it works when I adjust the top padding for ".menu ul #listcontain" but it moves the photo to a place I don't want it. I feel like I've tried everything (adjusting z-indexes, positions, etc.) and still cannot figure it out. I just started doing this a month ago can someone help me out? Many thanks.
So then for the CSS I have this (Just the menu. It's a big page so I'm trying to include just the part I need):
*{padding:0; margin:0;}
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#1491c1; background:url(../images/bg.jpg) repeat;}
img{border:none;}
h1{ font-family: 'Droid Serif', serif; font-weight:normal; color:#fff;}
h2{ font-family: 'Droid Serif', serif; font-weight:normal; color:#fff; font- size:18px;}
P{ line-height:20px;}
a{text-decoration:none; color:#1491c1;}
a:hover{color:#fff;}
/*-------------------------------------------------
GENERAL CLASSES
-------------------------------------------------*/
.mar-top{ margin-top:40px;}
.mar-top30{ margin-top:30px;}
.mar-bottom{ margin-bottom:40px;}
.mar-Right{ margin-right:40px;}
.mar-right115{ margin-right:115px;}
.float-left{ float:left;}
.float-right{ float:right;}
.clearing { clear:both;}
.bor-bottm-non{border-bottom:none!important;}
.panel{}
.title{}
.content{}
.wrap{width:960px; margin:0 auto;overflow:hidden; background:url(../images/page-bg.jpg);}
.page{ width:580px; margin:0 auto;overflow:hidden; padding-bottom:50px;}
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding- bottom:30px; padding-top:30px;}
.block{padding:20px 20px 20px 20px; margin:0 auto;}
.block2{padding:20px 20px 20px 20px; margin:0 auto;}
.button a{text-decoration:none; display:block; width:70px; height:30px; background:#1491c1; color:#ffffff; font-family:Arial, Helvetica, sans-serif; line-height:30px; text-align:center;}
.button a:hover{ background:#0e5295;}
/*-------------------------------------------------
CONTENT CLASSES
-------------------------------------------------*/
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding- bottom:30px; padding-top:30px;}
.page-content .content h3{ padding-bottom:20px;font-family: 'Droid Serif', serif; font-weight:normal; color:#fff; font-size:16px;}
.page-content .content p{ padding-bottom:15px;}
/*-------------------------------------------------
HEADER CLASSES
-------------------------------------------------*/
.header-wrap{ background:#083266; height:162px; width: 960; }
.header{ width:1200px; margin:0 auto; z-index: 11;}
.logo{ float:left; background:#1491c1; width:300px; }
.logo h1{font-size:25px; text-align:left; padding:40px 0px 36px 25px ;
}
.menu ul #listcontain{ list-style:none; float: left; border-right:#093e76 solid 1px; padding: 0px 20px 30px 20px; }
.menu ul #listcontain a{ text-decoration:none; color:#80d2f8; font- size:14px; text-align:center;padding-right: 5px;}
.menu ul #listcontain a:hover{ color:#1491c1;}
.menu ul #listcontain a.active{ color:#1491c1;}
* {
box-sizing: border-box;
}
#main {
position: relative;
list-style: none;
background: #083266;
font-weight: 400;
font-size: 0;
text-transform: none;
display: inline-block;
padding: 118px 0px 0px 0px;
margin: 0 auto;
}
#main li {
color: #ffffff;
font-size: 0.8rem;
display: inline-block;
position: relative;
padding: 13px 20px;
cursor: pointer;
z-index: 5;
min-width: 120px;
}
li {
margin: 0;
}
#marker {
height: 6px;
background: #1491c1 !important;
position: absolute;
bottom: 0;
width: 120px;
z-index: 2;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-ms-transition: all 0.35s;
transition: all 0.35s;
}
#main li:nth-child(1):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(1):hover ~ #marker {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
#main li:nth-child(2):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(2):hover ~ #marker {
-webkit-transform: translate(130px, 0);
-moz-transform: translate(130px, 0);
-ms-transform: translate(130px, 0);
transform: translate(133px, 0);
}
#main li:nth-child(3):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(3):hover ~ #marker {
-webkit-transform: translate(260px, 0);
-moz-transform: translate(260px, 0);
-ms-transform: translate(260px, 0);
transform: translate(269px, 0);
}
#main li:nth-child(4):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(4):hover ~ #marker {
-webkit-transform: translate(360px, 0);
-moz-transform: translate(380px, 0);
-ms-transform: translate(360px, 0);
transform: translate(397px, 0);
}
#main li:nth-child(5):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(5):hover ~ #marker {
-webkit-transform: translate(360px, 0);
-moz-transform: translate(380px, 0);
-ms-transform: translate(360px, 0);
transform: translate(529px, 0);
}
#drops {
overflow: hidden;
list-style: none;
position: absolute;
padding: 0;
width: 100%;
left: 0;
top: 58px;
}
#drops div {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
-ms-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
position: relative;
}
#drops li {
display: block;;
padding: 0;
width: 100%;
background: #3E8760 !important;
z-index: 10;
}
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel="stylesheet" type="text/css">
<nav>
<div class="wrap">
<div class="header">
<div class="logo"><h1>JHT Market Development Team (MDT) Site</h1></div>
<div class="menu" id="main">
<ul>
<li id="listcontain">Home</li>
<li id="listcontain">MDT Resources
<ul class="drop" id="drops">
<div>
<li>MDT Calender</li>
<li>MDT Agendas</li>
<li>Meeting Materials</li>
</div>
</ul>
<li id="listcontain">Proposals </li>
<li id="listcontain"> CSO Priorities </li>
<li id="listcontain">Contact MDT</li>
<div id="marker"></div>
</ul>
</div>
</div>
</div>
</nav>
I believe the problem lies somewhere in one of the general classes but I can't figure out how to fix it without screwing up the whole page.

Answer 1

I'm guessing that since the DOM for the menu comes before the body the absolute positioning is causing the main content to stack on top.
Imagine two divs right next to each other, and the first one is given absolute positioning. The second div would show up over the first, because that's just how DOM renders.
As #will stated in his comment, adding a z-index is probably the best route to take here.

Answer 2

This cause because you giving to .wrap class overflow:hidden; so if you removed it the submenu will appear, Or if you add some content after .header the menu also will appear in this case

Answer 3

Change the z-index to z-index 1 for the menu and z-index 0 for the rest of the page. I think that that will work...