悬停内容隐藏的子菜单
我遇到的问题是我正在处理的网页内容隐藏了子菜单。
我采用了多级css / jquery响应式菜单模板并将其插入到最初具有单级菜单的现有网站模板中。可以在此处找到一个示例：https://17aad55b712147f1863cdd5048313b445a649dc6-www.googledrive.com/host/0B5xMKrAhIobRQjZvcmtVOFg5Rm8/Contact2.html
我能找到的最常见的解决方案（无论是在SO还是通过谷歌）都是在相应的元素上设置位置和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}
我已经完全伸展了初学者的经验，所以任何帮助都会受到赞赏！谢谢！
1 个答案:
答案 0 :(得分：0)
问题是标题的.wrapper有óverflow：hidden;`并隐藏你的菜单，因为它超出了div，因此隐藏了。
解决方案是将此添加到您的CSS：
header .wrapper {
overflow: inherit;
}
然后你的子菜单没有背景，所以你可以通过添加它来为子菜单项添加背景（并且还为它们添加宽度）：
#menu li ul li {
background-color: #171310;
z-index: 999999;
width: 250px;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？