0
如果您能将将鼠标悬停在更多按钮，在这里的菜单： http://jsfiddle.net/H8FVE/3/ 你会发现，大宽画面的下方（#featured）是覆盖下拉股利。为什么以及如何修复它？滑块涵盖大型下拉菜单
这里是我的HTML代码的一部分：
<div id="second-menu" class="clearfix">
<ul id="secondary-menu" class="nav sf-js-enabled">
<li class="manimation"><a href="" style="width:400px;border-bottom:9px solid #43cf61">Animation</a></li>
</ul>
<ul id="mega">
<li class="dif mmore" style="background:none;"><a href="#" style="font-style:italic;border-bottom:9px solid #4b5571">More...</a>
<div>
<ticman>
<ul>
<li class="mgames"><a href="" style="border-bottom:9px solid #e34328">Games</a></li>
<li class="mliterature"><a href="" style="border-bottom:9px solid #2c8f83">Literature</a></li>
<li class="marts"><a href="" style="border-bottom:9px solid #cc226a">Arts</a></li>
<li class="mcontact" style="background:none;"><a href="" style="border-bottom:9px solid #9395aa">Contact</a></li>
</ul>
</ticman>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Madeline</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Lorence R</a></p>
<h2>Location</h2>
<p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
<p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
<p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
</div>
</li>
</ul>
</div> <!-- end #second-menu -->
<div class="et_cycle" id="featured">
<a href="#" id="left-arrow">Previous</a>
<a href="#" id="right-arrow">Next</a>
<div id="slides" style="position: relative; background-image: none;">
<div class="slide" style="position: absolute; top: 0px; left: 0px; z-index: 3; opacity: 1; display: block;">
<img width="958px" height="340px" alt="10 moments in cinematic history changing faith" src="http://ftframes.com/delheat/wordpress/wp-content/uploads/et_temp/ip-man-donnie-yen-756651_958x340.jpg"> <div class="featured-top-shadow"></div>
<div class="featured-bottom-shadow"></div>
<div class="featured-description">
<div class="feat_desc">
<p class="meta-info">Posted by <a rel="author" title="Posts by admin" href="http://ftframes.com/delheat/wordpress/?author=1">admin</a> on Aug 9, 2012</p>
<h2 class="featured-title"><a href="http://ftframes.com/delheat/wordpress/?p=43">Some random text here</a></h2>
<p>Well, I like this trailer a bit better than Chasing Mavericks’. Well for one, Gerry gets to keep his Scottish brogue, wahoo! Plus, I kind of like seeing him with kids. I mean the last time he played dad to a little boy was in the wonderful indie Dear Frankie, and he’s definitely a natural with them. Then there’s the supporting cast: Catherine Zeta-Jones, Jessica Biel, Uma Thurman, Dennis Quaid and...</p>
</div>
<a class="readmore" href="http://ftframes.com/delheat/wordpress/?p=43">Read More</a>
</div> <!-- end .description -->
</div> <!-- end .slide -->
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;">
<img width="958px" height="340px" alt="More experimental testings" src="http://ftframes.com/delheat/wordpress/wp-content/uploads/2012/07/vlcsnap-2012-05-13-22h37m19s79-300x129.png"> <div class="featured-top-shadow"></div>
<div class="featured-bottom-shadow"></div>
<div class="featured-description">
<div class="feat_desc">
<p class="meta-info">Posted by <a rel="author" title="Posts by admin" href="http://ftframes.com/delheat/wordpress/?author=1">admin</a> on Jul 30, 2012</p>
<h2 class="featured-title"><a href="http://ftframes.com/delheat/wordpress/?p=10">More experimental testings</a></h2>
<p>Lets see how this one turns out… Lets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one tur
Lets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how...</p>
</div>
<a class="readmore" href="http://ftframes.com/delheat/wordpress/?p=10">Read More</a>
</div> <!-- end .description -->
</div> <!-- end .slide -->
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;">
<img width="958px" height="340px" alt="Testing this theme with image" src="http://ftframes.com/delheat/wordpress/wp-content/uploads/et_temp/251932_10151043115229294_310983318_n-39277_635x340.jpg"> <div class="featured-top-shadow"></div>
<div class="featured-bottom-shadow"></div>
<div class="featured-description">
<div class="feat_desc">
<p class="meta-info">Posted by <a rel="author" title="Posts by admin" href="http://ftframes.com/delheat/wordpress/?author=1">admin</a> on Jul 30, 2012</p>
<h2 class="featured-title"><a href="http://ftframes.com/delheat/wordpress/?p=6">Testing this theme with image</a></h2>
<p>And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting...</p>
</div>
<a class="readmore" href="http://ftframes.com/delheat/wordpress/?p=6">Read More</a>
</div> <!-- end .description -->
</div> <!-- end .slide -->
</div> <!-- end #slides -->
</div> <!-- end #featured -->
这里是我的CSS的一部分：
ul#secondary-menu li { background: url(images/secondary-menu-bg.png) repeat-y top right; }
ul#secondary-menu a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px; }
ul#secondary-menu a:hover { color: #ffffff; text-shadow: 1px 1px 0 #404747; }
#second-menu ul.nav li:hover a {color: #ffffff; text-shadow: 1px 1px 0 #404747; }
ul#secondary-menu > li.current_page_item > a { color: #919e9e !important; }
ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important; padding: 7px 0 10px; background: #fff url(images/content-bg.png); top: 55px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important; padding: 8px 0 8px 30px !important; width: 150px; float: left; }
ul#secondary-menu ul li a, #category_mobile_menu a { padding: 0 !important; }
ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { top: -8px !important; left: 180px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#secondary-menu ul li.even-item { background: none; }
.mfilm:hover{
background:#ea2e49 !important;
}
.mtv:hover{
background:#2589cf !important;
}
.mwebvideos:hover{
background:#5c58ac !important;
}
.manimation:hover{
background:#43cf61 !important;
}
.manime:hover{
background:#c142a5 !important;
}
.mmanga:hover{
background:#e77848 !important;
}
.mcomics:hover{
background:#e8eb05 !important;
}
.mwriters:hover{
background:#ff3c75 !important;
}
.mmore:hover{
background:#4b5571 !important;
}
.mliterature:hover{
background:#2c8f83 !important;
}
.mgames:hover{
background:#e34328 !important;
}
.marts:hover{
background:#cc226a !important;
}
.mcontact:hover{
background:#9395aa !important;
}
/* ---------- Mega Drop Down --------- */
ul#mega li { padding-right: 0px; background: url(images/secondary-menu-bg.png) repeat-y top right; }
#mega {
list-style:none;
font-weight:bold;
height:2em;
}
#mega li {
padding: 23px 0px;
background:#999;
border:0px solid #000;
float:left;
text-align:center;
position:relative;
}
#mega li:hover {
background:#eee;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
z-index:1; /* shadow above adjacent li */
}
#mega a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px;}
ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; }
/* ----------- Hide/Show Div ---------- */
#mega div {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #48423F #48423F;
border-right: 1px solid #48423F;
border-style: none solid solid;
border-width: 0 1px 1px;
font-weight: normal;
left: -999em;
margin-top: 1px;
position: absolute;
text-align: left;
width: 496px;
}
/* --------- Within Div Styles --------- */
#mega li:hover div {
left: -1px;
top: auto;
}
#mega li.dif:hover div {
left: -407px;
top: 72px;
}
#mega li.mmore:hover > a {
color: #FFFFFF; text-shadow: 1px 1px 0 #404747; /* Ensures hover on MORE remains */
}
#mega div h2 {
background: none repeat scroll 0 0 #999999;
clear: both;
float: left;
font-size: 1em;
margin: 10px 0 5px;
padding: 0 10px;
position: relative;
width: 300px;
}
#mega div ticman {
clear: both;
float: left;
position: relative;
margin-left:1px;
margin-right:1px;
width: 495px;
height: 74px;
background-image: url(images/morebgwide.png);
background-size:495px 74px;
background-repeat:no-repeat;
}
#mega div p {
float: left;
padding-left: 10px;
position: relative;
width: 106px;
}
#mega div p a {
clear: left;
float: left;
line-height: 1.4;
text-decoration: underline;
width: 100%;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration: none;
}
/*------------------------------------------------*/
/*--------------[FEATURED SLIDER]-----------------*/
/*------------------------------------------------*/
#featured { position: relative; padding-bottom: 20px; margin-left: -1px; margin-right: -1px; }
a#left-arrow, a#right-arrow { position: absolute; top: 136px; width: 32px; height: 68px; text-indent:-9999px; }
a#left-arrow { background:url(images/left-arrow.png) no-repeat; left: -32px; }
a#right-arrow { background:url(images/right-arrow.png) no-repeat; right: -32px; }
.featured-top-shadow { background:url(images/featured-top-shadow.png) repeat-x; position: absolute; top:0px; left: 0px; width: 958px; height: 7px; }
.featured-bottom-shadow { background:url(images/featured-bottom-shadow.png) repeat-x; position: absolute; bottom:0; left: 0; width: 958px; height: 8px; }
.featured-description { position: absolute; width: 333px; height: 196px; top: 40px; right:54px; background:url(images/featured-description.png); padding: 27px 32px 40px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.featured-description p.meta-info { font-family: Georgia, serif; font-style: italic; font-size: 12px; color: #747474; }
.featured-description p.meta-info a { text-decoration: none; color: #fff; }
h2.featured-title { font-family: 'Kreon', Arial, sans-serif; font-weight: lighter;font-size: 30px; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); margin-top: -4px; }
h2.featured-title a { text-decoration: none; color: #ffffff; }
.featured-description p { color: #c9c8c8; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); line-height: 19px; }
a.readmore { display: block; background: url(images/readmore.png); height: 27px; padding: 0 17px; color: #dfca81; font-size: 12px; line-height: 27px; position: absolute; bottom: 0px; right: 0px; text-shadow: none; }
#featured a.readmore { -moz-border-radius-bottomright: 10px;-webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; }
#featured a.readmore:hover { color: #fff; }
虽然，我会建议远眺问题的视觉呈现的小提琴： http://jsfiddle.net/H8FVE/3/
我一直试图围绕这一整天到我几乎把我的头发着火的点。你知道如何解决这个问题吗？
不合时宜，它看起来像一个Z索引问题。尝试与图像和/或导航元素的z-index混在一起。 – Lowkase 2012-08-15 14:02:34
我不熟悉你提出的z-index问题。如果您有机会忽略它，请随时发布答案。 – 2012-08-15 14:03:32