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

z-index css属性を使用して、DOMツリーに関係なく、HTMLでこのようなオブジェクトを視覚的にレイヤー化します。ただし、最終的な実装のクロスブラウザ、特にIE7をテストすることをお勧めします。あなたが私たち全員にもたらす余分な仕事のためにIE7を酷評しなさい。

于 2012-08-15T14:09:22.707 に答える
1

http://jsfiddle.net/H8FVE/6/を参照してください:

追加するだけ

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

それslideは持っているz-index:3からです、それであなたが見たいのならsecond-menu、それz-indexはもっと高くなければなりません。

また、。を含む要素には影響しないposition:relativeため、追加する必要があります。z-indexposition: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 に答える
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を1ではなく10に変更しました。

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

于 2012-08-15T14:04:29.427 に答える
0

#second-menuに3のz-indexを与える

「#megadiv」に2のz-indexを与える

#featuredに1のz-indexを与える

于 2012-08-15T14:06:28.493 に答える