使导航下拉列表显示在另一个div上方

Question

当将鼠标悬停在菜单上时，我试图让我的子菜单出现在我的身体div 上方。这是我的问题的图片，因为该网站尚未上线。

我已经搞砸了一段时间了，似乎不知道我必须做些什么才能让它工作。我的子菜单有一个 z 索引值，但它仍然不会显示。如何让菜单显示在正文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> <a href="index.html">New Eve Inc.</a></h1>
      </div>
      <nav class="menu">
        <ul class="clearfix">
          <li>
            <a href="#">Menu <span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
              <li><a href="index.html">Home</a><br>
                <a href="aboutNewEve.html">About</a><br>
                <a href="bagSealing.html">Bag Sealing</a><br>
                <a href="clubPackaging.html">Club Packaging</a><br>
                <a href="displays.html">Displays</a><br>
                <a href="wareDist.html">Warehousing & Distribution</a><br>
                <a href="contact.html">Contact Us</a>
              </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

只需在#header中将overflow: hidden更改为overflow: visible

   
 @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> <a href="index.html">New Eve Inc.</a></h1>
      </div>
      <nav class="menu">
        <ul class="clearfix">
          <li>
            <a href="#">Menu <span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
              <li><a href="index.html">Home</a><br>
                <a href="aboutNewEve.html">About</a><br>
                <a href="bagSealing.html">Bag Sealing</a><br>
                <a href="clubPackaging.html">Club Packaging</a><br>
                <a href="displays.html">Displays</a><br>
                <a href="wareDist.html">Warehousing & Distribution</a><br>
                <a href="contact.html">Contact Us</a>
              </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>