0

如果您可以将鼠标悬停在此处菜单中的“更多”按钮上:http: //jsfiddle.net/H8FVE/3/ 您会注意到下方的宽大图片(#featured)覆盖了下拉 div。为什么以及如何解决?

这是我的 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
&nbsp;
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/

我一整天都在努力解决这个问题,以至于我几乎把头发着火了。你知道如何解决这个问题吗?

4

4 回答 4

2

无论您的 DOM 树如何,使用 z-index css 属性在 HTML 中直观地分层对象。我建议你测试你最终的跨浏览器实现,尤其是 IE7。该死的 IE7 你给我们带来的额外工作。

于 2012-08-15T14:09:22.707 回答
1

尝试这个:

#mega li:hover {
background:#eee;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
z-index:10; /* shadow above adjacent li */
}

我将 z-index 更改为 10,而不是 1。

http://jsfiddle.net/H8FVE/5/

于 2012-08-15T14:04:29.427 回答
1

请参阅http://jsfiddle.net/H8FVE/6/

只需添加

#second-menu{
    z-index:4;position:relative;
}

那是因为slidez-index:3,所以如果你想看second-menu,它z-index必须更高。

而且您也必须添加position:relative,因为z-index对带有 . 的元素没有影响position:static

编辑

我看到你有

#mega div{
    left:-999em;
}
#mega li.dif:hover div {
    left: -407px;
    top: 72px;
}

我认为这样会更好:

#mega > li.dif > div{
    display:none:
    left: -407px;
    top: 72px;
}
#mega > li.dif:hover > div {
    display: block;
}

那是因为如果您设置left:-999em;#mega div,您认为它不会显示,因为 -999em 很多。但如果你想隐藏它,不显示它不是更好吗?

我添加了子选择器(>),因为将来你可能会修改它并在里面添加更多的 div #mega > li.dif > div;子选择器应该比后代选择器快。

于 2012-08-15T14:07:33.507 回答
0

将 #second-menu 的 z-index 设为 3

将“#mega div”的 z-index 设为 2

将 #featured 的 z-index 设为 1

于 2012-08-15T14:06:28.493 回答