Make a navigation drop down show above another div - html

Question

I am trying to get my sub-menu to appear above my body div when hovering over menu. Here is a picture of my problem since the website is not live yet.
I have been messing around with this for a while now and can't seem to figure out what I have to do to get it to work. I have a z-index value for my sub menu but it still won't show. How can I get the menu to show above the body div?
#charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
.clearfix:after
{
display: block;
clear: both;
}
.menu
{
width: 300px;
margin: auto;
padding: 0px;
padding-top: 10px;
position: absolute;
margin-left: 0px;
top: 0;
}
.menu li
{
margin: 0px;
list-style: none;
font-size: 0px;
}
.menu a
{
transition: all linear 0.15s;
font-size: 28px;
color: black;
text-decoration: none;
}
.menu li:hover > a, .menu .current-item > a
{
text-decoration: none;
}
.menu .arrow
{
font-size: 20px;
line-height: 0%;
}
.menu > ul > li
{
float :left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a
{
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a
{
color: blue;
}
.sub-menu
{
width: 350px;
padding: 5px 0px;
position: relative;
z-index: 999;
opacity: 0;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
}
.menu li:hover .sub-menu
{
opacity: 1;
}
.sub-menu li a
{
padding: 10px 50px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: black;
background-color: red;
}
.sub-menu li a:hover, .sub-menu .current-item a
{
color: blue;
}
.sub-menu ul li :hover ul
{
}
.gridContainer
{
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
.zeroMargin_desktop
{
margin-left: 0;
}
.hide_desktop
{
display: none;
}
#body
{
margin-left: auto;
margin-right: auto;
width: auto;
color: black;
}
#container
{
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-color: #00008B;
border-bottom-color: #00008B;
border-right-color: #00008B;
border-left-color: #00008B;
width: 968px;
background: #FFF;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
padding: 0px;
overflow: hidden;
}
#header
{
background-color: #EBC79E;
width: auto;
position: relative;
height: 100px;
margin: auto;
margin-top: 0px;
overflow: hidden;
}
#logo
{
width: 350px;
margin:auto;
height: auto;
padding: 0px;
padding-top: 20px;
padding-bottom: 10px;
text-align: center;
}
#logo h1
{
font-size: 55px;
}
#logo h1 a
{
list-style-type: none;
color: #000000;
text-decoration: none;
}
#footer
{
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
width: auto;
margin: auto;
background-color: #EBC79E;
position:relative;
border-top-style: solid;
border-top-color: #000;
overflow: hidden;
}
#footer p
{
padding-left: 35px;
}
#homeBody
{
border-top-style: solid;
border-top-color: #000;
width: auto;
margin: auto;
margin-bottom: -20px;
background-color: #FFF;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color: #CDCDB4;
position: relative;
}
#homeBody h1
{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 35px;
}
#homeBody h2
{
text-align: center;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
#homeBody p
{
padding-top: 20px;
margin-right: 25px;
margin-left: 25px;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
#homeBody img
{
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
<body bgcolor="#87CEFA">
<div id="container">
<div id="header">
<div id="logo">
<h1> New Eve Inc.</h1>
</div>
<nav class="menu">
<ul class="clearfix">
<li>
Menu <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Home<br>
About<br>
Bag Sealing<br>
Club Packaging<br>
Displays<br>
Warehousing & Distribution<br>
Contact Us
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="homeBody">
<h1>New Eve Inc.</h1>
<h2>Your Partner in Fulfillment Every Step of the Way</h2>
<p>New Eve has the knowledge and expertise to provide you with the most cost-effective packaging, warehousing, and frieght solutions for your product. We understand that your product is unique, with its own market identity, packaging needs, and delivery
requirements. This is why we offer solutions that will bring your product to market quickly and more profitably.
</p>
<img src="images/high view.jpg" alt="Building">
</div>
<div id="footer">
<p> New Eve Inc. <br> 100 Enterprise Drive Carbondale PA, 18407</p>
</div>
</div>
</body>
</html>

Answer 1

Just change overflow: hidden to overflow: visible in #header
#charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
.clearfix:after
{
display: block;
clear: both;
}
.menu
{
width: 300px;
margin: auto;
padding: 0px;
padding-top: 10px;
position: absolute;
margin-left: 0px;
top: 0;
}
.menu li
{
margin: 0px;
list-style: none;
font-size: 0px;
}
.menu a
{
transition: all linear 0.15s;
font-size: 28px;
color: black;
text-decoration: none;
}
.menu li:hover > a, .menu .current-item > a
{
text-decoration: none;
}
.menu .arrow
{
font-size: 20px;
line-height: 0%;
}
.menu > ul > li
{
float :left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a
{
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a
{
color: blue;
}
.sub-menu
{
width: 350px;
padding: 5px 0px;
position: relative;
z-index: 999;
opacity: 0;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
}
.menu li:hover .sub-menu
{
opacity: 1;
}
.sub-menu li a
{
padding: 10px 50px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: black;
background-color: red;
}
.sub-menu li a:hover, .sub-menu .current-item a
{
color: blue;
}
.sub-menu ul li :hover ul
{
}
.gridContainer
{
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
.zeroMargin_desktop
{
margin-left: 0;
}
.hide_desktop
{
display: none;
}
#body
{
margin-left: auto;
margin-right: auto;
width: auto;
color: black;
}
#container
{
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-color: #00008B;
border-bottom-color: #00008B;
border-right-color: #00008B;
border-left-color: #00008B;
width: 968px;
background: #FFF;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
padding: 0px;
overflow: hidden;
}
#header
{
background-color: #EBC79E;
width: auto;
position: relative;
height: 100px;
margin: auto;
margin-top: 0px;
overflow: visible;
}
#logo
{
width: 350px;
margin:auto;
height: auto;
padding: 0px;
padding-top: 20px;
padding-bottom: 10px;
text-align: center;
}
#logo h1
{
font-size: 55px;
}
#logo h1 a
{
list-style-type: none;
color: #000000;
text-decoration: none;
}
#footer
{
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
width: auto;
margin: auto;
background-color: #EBC79E;
position:relative;
border-top-style: solid;
border-top-color: #000;
overflow: hidden;
}
#footer p
{
padding-left: 35px;
}
#homeBody
{
border-top-style: solid;
border-top-color: #000;
width: auto;
margin: auto;
margin-bottom: -20px;
background-color: #FFF;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color: #CDCDB4;
position: relative;
}
#homeBody h1
{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 35px;
}
#homeBody h2
{
text-align: center;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
#homeBody p
{
padding-top: 20px;
margin-right: 25px;
margin-left: 25px;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
#homeBody img
{
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
<body bgcolor="#87CEFA">
<div id="container">
<div id="header">
<div id="logo">
<h1> New Eve Inc.</h1>
</div>
<nav class="menu">
<ul class="clearfix">
<li>
Menu <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Home<br>
About<br>
Bag Sealing<br>
Club Packaging<br>
Displays<br>
Warehousing & Distribution<br>
Contact Us
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="homeBody">
<h1>New Eve Inc.</h1>
<h2>Your Partner in Fulfillment Every Step of the Way</h2>
<p>New Eve has the knowledge and expertise to provide you with the most cost-effective packaging, warehousing, and frieght solutions for your product. We understand that your product is unique, with its own market identity, packaging needs, and delivery
requirements. This is why we offer solutions that will bring your product to market quickly and more profitably.
</p>
<img src="images/high view.jpg" alt="Building">
</div>
<div id="footer">
<p> New Eve Inc. <br> 100 Enterprise Drive Carbondale PA, 18407</p>
</div>
</div>
</body>
</html>