1
我想讓我的子菜單出現在我的body div上方，當鼠標懸停在菜單上時。由於該網站尚未投入使用，因此請致電Here is a picture of my problem。將導航下拉顯示在另一個div的上方
我一直在這裏亂搞了一段時間，似乎無法弄清楚我必須做些什麼才能讓它工作。我的子菜單有一個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 {
\t max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
\t width:100%;
}
/*
\t Dreamweaver Fluid Grid Properties
\t ----------------------------------
\t dw-num-cols-mobile: \t \t 4;
\t dw-num-cols-tablet: \t \t 8;
\t dw-num-cols-desktop: \t 12;
\t dw-gutter-percentage: \t 25;
\t
\t Inspiration from "Responsive Web Design" by Ethan Marcotte
\t http://www.alistapart.com/articles/responsive-web-design
\t
\t and Golden Grid System by Joni Korpi
\t http://goldengridsystem.com/
*/
.fluid {
\t clear: both;
\t margin-left: 0;
\t width: 100%;
\t float: left;
\t display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
.clearfix:after
{
display: block;
clear: both;
}
.menu
{
width: 300px;
\t margin: auto;
\t padding: 0px;
\t padding-top: 10px;
\t position: absolute;
\t margin-left: 0px;
\t top: 0;
}
.menu li
{
margin: 0px;
list-style: none;
\t font-size: 0px;
}
.menu a
{
transition: all linear 0.15s;
\t font-size: 28px;
\t color: black;
\t 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;
\t 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;
\t font-size: 20px;
\t font-family: Arial, Helvetica, sans-serif;
\t color: black;
\t background-color: red;
}
.sub-menu li a:hover, .sub-menu .current-item a
{
color: blue;
\t
}
.sub-menu ul li :hover ul
{
\t
}
.gridContainer
{
\t width: 88.5%;
\t max-width: 1232px;
\t padding-left: 0.75%;
\t padding-right: 0.75%;
\t margin: auto;
\t clear: none;
\t float: none;
\t margin-left: auto;
}
.zeroMargin_desktop
{
margin-left: 0;
}
.hide_desktop
{
display: none;
}
#body
{
\t margin-left: auto;
\t margin-right: auto;
\t width: auto;
\t color: black;
}
#container
{
\t border-top-style: solid;
\t border-right-style: solid;
\t border-left-style: solid;
\t border-bottom-style: solid;
\t border-top-color: #00008B;
\t border-bottom-color: #00008B;
\t border-right-color: #00008B;
\t border-left-color: #00008B;
\t width: 968px;
\t background: #FFF;
\t margin: auto;
\t margin-top: 0px;
\t margin-bottom: 0px;
\t position: relative;
\t padding: 0px;
\t overflow: hidden;
}
#header
{
\t background-color: #EBC79E;
\t width: auto;
\t position: relative; \t
\t height: 100px;
\t margin: auto;
\t margin-top: 0px;
\t overflow: hidden;
}
#logo
{
\t width: 350px;
\t margin:auto;
\t height: auto;
\t padding: 0px;
\t padding-top: 20px;
\t padding-bottom: 10px;
\t text-align: center;
}
#logo h1
{
\t font-size: 55px;
}
#logo h1 a
{
\t list-style-type: none;
\t color: #000000;
\t text-decoration: none;
} \t
#footer
{
\t font-size: 20px;
\t font-family: Arial, Helvetica, sans-serif;
\t width: auto;
\t margin: auto;
\t background-color: #EBC79E;
\t position:relative;
\t border-top-style: solid;
\t border-top-color: #000;
\t overflow: hidden;
}
#footer p
{
\t padding-left: 35px;
}
#homeBody
{
\t border-top-style: solid;
\t border-top-color: #000;
\t width: auto;
\t margin: auto;
\t margin-bottom: -20px;
\t background-color: #FFF; \t
\t padding-top: 20px;
\t padding-bottom: 20px;
\t padding-left: 20px;
\t background-color: #CDCDB4;
\t position: relative;
}
#homeBody h1
{
\t text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
\t font-size: 35px; \t \t
}
#homeBody h2
{
\t text-align: center;
\t font-size: 28px;
\t font-family: Arial, Helvetica, sans-serif;
}
#homeBody p
{
\t padding-top: 20px;
\t margin-right: 25px;
\t margin-left: 25px;
\t font-size: 24px;
\t font-family: Arial, Helvetica, sans-serif;
\t \t
}
#homeBody img
{
\t padding-top: 20px;
\t padding-bottom: 20px;
\t display: block; \t
margin-left: auto;
margin-right: auto; \t
}<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">▼</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>
嗨，歡迎堆棧溢出。您提供的代碼不會在您的屏幕截圖中複製問題。請給我們一個複製問題的[mcve]。 –
我想它是一個Z指數的問題，給你的菜單鋰和菜單更多的Z - 索引比另一個元素，它將正常工作！ – Ishu
我嘗試將z-index添加到菜單li和菜單中，但沒有任何反應。我也擺脫了我已經在子菜單中的Z - 索引，它仍然不會工作:( –