【发布时间】：2015-01-20 03:22:59
【问题描述】：
我正在处理的网页内容隐藏子菜单时遇到问题。
我采用了一个多级 css/jquery 响应式菜单模板并将其插入到一个现有的网站模板中，该模板最初具有一个单级菜单。一个例子可以在这里找到：https://17aad55b712147f1863cdd5048313b445a649dc6-www.googledrive.com/host/0B5xMKrAhIobRQjZvcmtVOFg5Rm8/Contact2.html
我能找到的最常见的解决方案（在 SO 上和通过 Google 上）是在适当的元素上设置位置和 z-index 值，但我尝试过没有成功。我认为部分问题可能是我没有正确识别父元素，但我不确定。我也只对 z-index 的工作原理有一个基本的了解，所以也许还有其他我不知道的影响结构的因素。
我已经复制了下面的html和css，但我相信你也可以通过https://drive.google.com/drive/#folders/0B5xMKrAhIobROEtrb0swUDZGSUE/0B5xMKrAhIobRQjZvcmtVOFg5Rm8访问它们
有问题的代码是：
<body id="page5">
<div class="body1">
<div class="main">
<!-- header -->
<header>
<div class="wrapper">
<h1><a href="index.html" id="logo">A Little Bit of Heaven</a></h1>
<nav>
<ul id="top_nav">
<li><a href="index.html"><img src="images/top_icon1.gif" alt=""></a></li>
<li><a href="#"><img src="images/top_icon2.gif" alt=""></a></li>
<li class="end"><a href="Contact.html"><img src="images/top_icon3.gif" alt=""></a></li>
</ul>
</nav>
<nav class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul id="menu" class="nav">
<li><a href="index.html">Home</a></li>
<li><a href='#'>About Us</a>
<ul>
<li><a href='#'>Our Mission</a></li>
<li><a href='Services.html'>Services</a></li>
<li><a href='News.html'>News ' Press</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</li>
<li><a href='#'>Our Horses</a>
<ul>
<li><a href='#'>Mares</a></li>
<li><a href='#'>Geldings</a></li>
<li><a href='#'>Syracuse Herd</a></li>
<li><a href='#'>Owls Head Herd</a></li>
<li><a href='#'>Lara's Herd</a></li>
<li><a href='#'>Success Stories</a></li>
<li><a href='#'>In Memory</a></li>
</ul>
</li>
<li class='has-sub'><a href='Help.html'>How to Help</a>
<ul>
<li><a href='#'>Businesses</a></li>
<li><a href='Donate.html'>Donate</a></li>
<li><a href='#'>Volunteer</a></li>
<li><a href='#'>Fundraisers</a></li>
<li><a href='#'>Sponsor a Horse</a></li>
<li><a href='#'>Foster a Horse</a></li>
<li><a href='#'>Adopt a Horse</a></li>
</ul>
</li>
<li id="menu_active"><a href='#'>Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- / header -->
<!-- content -->
<article id="content">
<div class="wrapper">
<div class="box1">
<div class="line1 wrapper">
<section class="col1">
<h2><strong>O</strong>ur<span> Address</span></h2>
<strong class="address">
Country:<br>
City:<br>
Zip Code:<br>
Telephone:<br>
E-Mail:
</strong>
USA<br>
North Lawrence<br>
12967<br>
+1 315 276 5415<br>
<a style="font-size:85%;" href="mailto:">alittlebitofheaven14@gmail.com</a><br />
<br />
<br />
<h2><strong>B</strong>oard<span style="font-size:80%;"> of </span><span>Directors</span></h2>
Anne Foley - President<br />
Michael Woods - Vice-President<br />
William Smith - Director of Development<br />
Amanda Koboski - Treasurer<br />
Michelle White - Secretary<br />
<br />
<br />
<b>Federal EIN: </b>46-4239165<br />
<b>NYS Non-profit ID: </b>140304000642<br />
<b>NYS Registered Charity ID: </b>44-56-21
</section>
<section class="col2 pad_left1">
<h2 class="color2"><strong>A</strong>bout <span>Us</span></h2>
<p class="pad_bot1">
<i>A Little Bit of Heaven</i> is a New York State registered non-profit equine rehabilitation center with federal 501(c)(3) status pending. It grew out of a for-profit business that was also equine related. Late in the summer of 2013, we began getting requests from local people to take their unwanted horses, which would otherwise be sent to slaughter. Many of these horses were in need of training or extra care, but had great potential to become something if they were given a chance. The word that we were accepting unwanted horses spread like wildfire, and we soon had to begin refusing horses as we were paying for their care out of the business profits. We took in and re-homed 21 horses that year, and refused over 15 due to lack of funding.<br /><br />In 2014 calls began coming in early spring. We decided to open <i>A Little Bit of Heaven</i> as a non-profit charity to get some help from the public. Many people simply couldn't care for their horses anymore and, since they could not find another alternative, were considering sending them to slaughter. They were happy to have another option.<br /><br />Since our inception we have received many calls about similar situations, and discovered that most other facilities are operating at full capacity. We at <i>A Little Bit of Heaven</i> rely solely on the generous donations from the public to help us help these horses!
</p>
</section>
</div>
</div>
</div>
<div class="wrapper">
<div class="pad_left2 relative">
<h4 class="color3"><span>Contact</span> Form</h4>
<img src="images/page6_img1.png" alt="" class="img1">
<form id="ContactForm" action="contact.php" method="post">
<div>
<div class="wrapper"><span>Your Name:</span><input type="text" class="input" name="cfname"></div>
<div class="wrapper"><span>Your E-mail:</span><input type="text" class="input" name="cfemail"></div>
<div class="wrapper"><span>Your Telephone:</span><input type="text" class="input" name="cfphone"></div>
<div class="textarea_box"><span>Your Message:</span><textarea name="textarea" cols="1" rows="1"></textarea></div>
<input class="button2 color3" type="submit" value="Send" style="float:right;">
<input class="button2 color3" type="reset" value="Clear" style="float:right; margin-right:10px;">
</div>
</form>
</div>
</div>
</article>
<!-- / content -->
由于我将现有模板插入到另一个模板中，因此我将 CSS 文件分开。菜单的 CSS 是：
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:transparent;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background:transparent;
position: relative;
z-index:100;
}
.nav li li li a {
background:transparent; z-index:200;
}
@media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
一般网站的 CSS 是：
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline }
/* Left & Right alignment */
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}
/* Global properties ======================================================== */
body {background:url(../images/bg.jpg) top center repeat;border:0;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#575652;line-height:22px}
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.css3 {border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:0 0 4px rgba(0, 0, 0, .4);-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);position:relative}
/* Global Structure ============================================================= */
.main {margin:0 auto;width:940px}
.body1 {background:url(../images/bg_top.gif) top repeat-x}
/* ============================= main layout ====================== */
a {color:#575652;text-decoration:underline;outline:none}
a:hover {text-decoration:none}
h1 {float:left;padding:44px 0 0 35px}
h2 {font-size:35px;color:#575652;font-weight:400;line-height:1.2em;letter-spacing:-1px;padding-bottom:12px}
h2 span {font-weight:300}
h2 strong, .box1 h2 strong {font-weight:700;display:inline-block;width:36px;color:#fff;text-align:center;background:url(../images/bg_title1.gif) 0 4px repeat-x;margin-right:3px}
h2.color2 strong {background-image:url(../images/bg_title2.gif)}
h2.color3 strong {background-image:url(../images/bg_title3.gif)}
h3 {font-size:35px;color:#dad6cc;font-weight:400;line-height:1.2em;padding:25px 0 0 35px;float:left;letter-spacing:-1px}
h4 {color:#dad6cc;font-weight:300;font-size:35px;line-height:1.2em;padding:0 0 7px 0;letter-spacing:-1px}
h4 span {color:#ffc11e;font-weight:400}
h4.color2 span {color:#9ecf39}
h4.color3 span {color:#6cd6af}
#page4 h4, #page5 h4 {padding:25px 0 16px 0;margin-left:-3px}
p {padding-bottom:22px}
strong {color:#dcd9cf}
/* ============================= header ====================== */
header {}
#logo {display:block;background:url(../images/logo.png) 0 0 no-repeat;width:146px;height:83px;text-indent:-9999px}
#menu {float:right;padding:28px 12px 20px 0;}
#menu li {float:left;padding-left:1px}
#menu li a {display:block;padding:0 20px;height:42px;font-size:18px;color:#dad6cc;line-height:42px;text-transform:uppercase;text-decoration:none;font-weight:400}
#menu li a:hover, #menu #menu_active a {background:url(../images/menu_active.gif) top repeat-x;color:#fff}
#top_nav {float:right;padding:40px 37px 0 575px}
#top_nav li {float:left;padding:4px 26px 5px 0;margin-right:25px;background:url(../images/top_line.png) right 0 no-repeat}
#top_nav .end {padding-right:0;margin-right:0;background:none}
.slider {position:relative;z-index:1;width:100%;height:465px;overflow:hidden;margin-bottom:10px}
.slider .items {display:none}
.pic {float:right;position:relative}
.mask {left:auto !important;right:0;width:720px !important}
.pagination {position:absolute;left:0;top:0;z-index:3}
.pagination li {width:250px;height:155px}
.pagination a {display:block;position:relative;cursor:pointer;padding:29px 0 0 33px;font-size:50px;line-height:1.2em;font-weight:400;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:-1px;height:126px}
.pagination a span {display:block;font-weight:300;font-size:30px;line-height:1.2em;margin-top:-10px;letter-spacing:0}
#banner1 {background:url(../images/banner1.png) 0 0 no-repeat}
#banner1 a {background:url(../images/banner1_active.png) -250px 0 no-repeat}
#banner2 {background:url(../images/banner2.png) 0 0 no-repeat}
#banner2 a {background:url(../images/banner2_active.png) -250px 0 no-repeat}
#banner3 {background:url(../images/banner3.png) 0 0 no-repeat}
#banner3 a {background:url(../images/banner3_active.png) -250px 0 no-repeat}
.pagination #banner1:hover, .pagination #banner1.current, .pagination #banner2:hover, .pagination #banner2.current, .pagination #banner3:hover, .pagination #banner3.current {}
.banner {position:absolute;z-index:2;right:0;bottom:0;margin:0 10px 10px 0}
.banner span {float:right;padding:0 32px;margin-bottom:5px;background:#000;font-size:40px;line-height:56px;height:56px;font-weight:400;color:#dad6cc;line-height:1.2em}
.banner em {font-style:normal;text-transform:uppercase}
.banner strong {float:right;padding:0 32px;background:#000;font-size:40px;line-height:56px;font-weight:300;color:#dad6cc}
/* ============================= content ====================== */
#content {}
.pad_left1 {padding-left:26px}
.pad_left2 {padding-left:36px}
.pad_bot1 {padding-bottom:14px}
.pad_bot2 {padding-bottom:4px}
.marg_right1 {margin-right:37px}
.box1 {background:url(../images/bg_box1.jpg) top center no-repeat #dad6cc;border-top:5px solid #cdc8bc;padding:15px 30px 29px;}
.box1 strong {color:#3f3f3f}
.box1 figure {box-shadow:0 0 3px #a4a19a;-moz-box-shadow:0 0 3px #a4a19a;-webkit-box-shadow:0 0 3px #a4a19a; position:relative;}
.box2 {background:#0e0c0a;padding:25px 30px 32px}
.box2 .line1, .box2 .line2 {background-image:url(../images/line_vert2.gif)}
#page4 .box2 {margin-top:7px;padding-top:30px;padding-bottom:28px}
.line1 {background:url(../images/line_vert1.gif) 289px 0 repeat-y}
.line2 {background:url(../images/line_vert1.gif) 591px 0 repeat-y}
#page3 .line1 {background-position:282px 0}
.relative {position:relative}
.button1 {float:right;color:#dddad1;text-decoration:none;background:#000;line-height:18px;padding:0 9px;margin-top:2px}
* + html .button1 {margin-top:-20px}
.button1 {color:#dddad1}
.button1:hover {background:#ffb919;color:#fff}
.button1.color2 {color:#dddad1}
.button1.color2:hover {background:#94c932;color:#fff}
.button1.color3 {color:#dddad1}
.button1.color3:hover {background:#63d1a7;color:#fff}
.button2 {display:inline-block;font-size:15px;color:#fff;text-transform:uppercase;text-decoration:none;padding:0 21px;height:36px;line-height:34px;font-weight:400;background:url(../images/button1_bg.gif) top repeat-x;letter-spacing:-1px}
.button2.color2 {background-image:url(../images/button2_bg.gif)}
.button2.color3 {background-image:url(../images/button3_bg.gif)}
.button2:hover {background:#000}
.color0 {color:#616161;text-decoration:none}
.link1 {text-decoration:none}
.link1:hover {text-decoration:underline}
.quot {margin-top:17px;float:left;margin-left:94px;padding:12px 0 17px 41px;font-style:italic;background:url(../images/quot1.png) 0 0 no-repeat;width:570px}
.quot img {display:inline-block;margin:4px 0 0 9px}
#page2 .quot {padding-bottom:7px}
.list1 {margin-top:-2px;margin-bottom:-2px}
.list1 li {line-height:26px}
.list1 li a {color:#dcd8cf;padding-left:22px;background:url(../images/marker_1.gif) 0 3px no-repeat}
.list1 .color2 a {background-position:0 -23px}
.list1 .color3 a {background-position:0 -49px}
/*--- tabs begin ---*/
.tabs {}
.tabs ul.nav {padding:27px 0 27px 2px;overflow:hidden}
.tabs ul.nav li {float:left;padding-left:31px}
.tabs ul.nav li a {font-size:35px;color:#ddd9cf;font-weight:400;text-decoration:none;line-height:1.2em;letter-spacing:-1px}
.tabs ul.nav .selected a, .tabs ul.nav a:hover {color:#ffc11e}
.tabs .tab-content {}
/*--- tabs end ---*/
.address {float:left;width:80px}
.img1 {position:absolute;right:0;top:32px}
/* ============================= footer ====================== */
footer {background:#000;padding:21px 36px 44px}
#footer_logo {float:left;font-size:46px;font-weight:300;text-transform:uppercase;color:#dedbd2;line-height:1.2em;text-decoration:none;letter-spacing:-3px;margin-left:-4px}
#footer_logo span {color:#ffc11e}
#icons {float:right;padding:20px 0 0 0}
#icons li {float:left;padding-left:4px}
/* Tooltips */
.aToolTip {background:#ffc11e;color:#fff;font-weight:bold;margin:0;padding:2px 10px 3px;font-size:11px;position:absolute;line-height:17px}
.aToolTip .aToolTipContent {position:relative;margin:0;padding:0}
.tel {float:right;margin-top:-1px;background:url(../images/bot_icon.gif) 0 15px no-repeat;padding:0 0 0 38px;font-size:35px;line-height:1.2em;color:#dedad1;letter-spacing:-2px;font-weight:300}
.tel span {color:#ffc11e}
footer nav {float:left}
#footer_menu {float:left;padding:15px 0 18px 0;margin-left:-1px}
#footer_menu li {float:left;padding-right:29px;background:url(../images/menu_line.gif) right 0 no-repeat;margin-right:29px}
#footer_menu li a {display:block;color:#fff;text-decoration:none;line-height:20px}
#footer_menu li a:hover, #footer_menu .active a {color:#575652}
#footer_menu .end {background:none;padding-right:0;padding-left:0}
#footer_text {padding-top:18px;border-top:1px solid #0d0d0d;text-align:center}
#footer_text a {color:#fff;text-decoration:none}
#footer_text a:hover {text-decoration:underline}
/* ============================= forms ============================= */
#ContactForm {width:585px;overflow:hidden;padding-bottom:36px}
#ContactForm .wrapper {height:26px}
#ContactForm span {float:left;width:105px;line-height:24px}
#ContactForm .textarea_box {width:100%;overflow:hidden;min-height:103px;padding-bottom:5px}
#ContactForm {}
#ContactForm a {margin-left:10px;width:72px;text-align:center;float:right}
#ContactForm .input {width:470px;background:#000;padding:3px 5px;color:#575652;font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;height:14px}
#ContactForm textarea {overflow:auto;width:470px;background:#000;padding:3px 5px;color:#575652;font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;height:91px}
我已经尽我所能扩展了我的初学者级别的经验，所以任何帮助都将不胜感激！谢谢！
【问题讨论】：