将导航下拉菜单显示在另一个div上方

时间：2017-02-14 15:55:36

标签： html css

当我将鼠标悬停在菜单上时，我试图让我的子菜单显示在我的身体div上方。 Here is a picture of my problem因为该网站尚未生效。

我现在已经搞砸了一段时间，似乎无法弄清楚我必须做些什么才能让它发挥作用。我的子菜单有一个z-index值但它仍然不会显示。如何让菜单显示在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> <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>

1 个答案:

答案 0 :(得分：0)

只需在<script type="text/javascript"> var docScrollTop; var prm = Sys.WebForms.PageRequestManager.getInstance(); function BeginRequestHandler(sender, args) { docScrollTop= $(document).scrollTop(); } function EndRequestHandler(sender, args) { $(document).scrollTop(docScrollTop); } prm.add_beginRequest(BeginRequestHandler); prm.add_endRequest(EndRequestHandler); </script>

中将overflow: hidden更改为overflow: visible即可

＆＃13;
＆＃13; 
#header
＆＃13; 
   

 @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;	
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题