1

私はこのトピックの研究に多くの時間を費やしてきましたが、同様の問題に遭遇したにもかかわらず、特定の問題の解決策を見つけることができませんでしたが、それらの解決策は私のものには合わないようです。私が抱えている問題は、IE以外のブラウザには存在しません。メインのリンクにカーソルを合わせて、リンクのフォーカスであるドロップダウンを表示すると、構築しているサイトのメインナビゲーション(#mainNav)が表示されます。実際のテキストにのみ表示されているようです。したがって、マウスをリストの下に移動しようとすると、手が矢印に戻ってメニューが消える前に、メインリンクのテキストしか表示されません。これはCSS3メニューです。すべてのブラウザで別のサイトで正常に動作していて、IEの修正がないように見えるので、コードを取得してこのサイトで使用することにしました。IEでチェックするまで、すべてうまくいきました:/

これらは私が見た領域です(通常、このような場合に問題になります):display-block(すべての「a」タグに存在)、マージンの削除、パディングの増加(役に立たなかった)、高さの値の割り当て(役に立たなかった)、行の高さを増やした(いいえ)。私は他のブログで、リンクに背景色がないことが問題になる可能性があることを読みました(いいえ)。また、透明な1px画像を使用するとうまくいくことも読みました(いいえ)。私が「いいえ」と言うとき、それは私が修正を正しく組み込んだことを前提としています。

助けてくれてありがとう!

CSSは次のとおりです。

/* //////// MAIN NAVIGATION //////// */

/* Reset */
#navMain,
#navMain ul,
#navMain li,
#navMain a {
    border:none;
    font-weight:normal;
    margin:0;
    outline:none;
    padding:0;
    z-index:1000;   
}

/* Menu */

#mainNav-wrap {
    width:100%;
    height:47px;
    float:left; 
    background:#00aeef;
    border-top:#014964 1px solid;
    box-shadow: 0px 2px 2px #999999;
}

#navMain {  
    /*height:40px;*/
    width:960px;
    position:relative;
    z-index:500;
    margin:0 auto;
    }

#navMain li {
    display:block;
    float:left;
    height:40px;
    list-style:none;
    /*padding:40px 8px 0 4px;*/
    position:relative;
    text-transform:uppercase;
    }

#navMain li li {
    text-transform:capitalize;  
}


/* Links */
#navMain li a {
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    color:#fff;
    display:block;
    font-size:18px;
    line-height:18px;
    font-family:'Raleway', sans-serif;
    padding:15px 19px;
    text-decoration:none;
    text-shadow:0px 1px 1px rgba(0,0,0,.1);
    transition:color .2s ease-in-out;
    -webkit-transition:color .2s ease-in-out;
    -moz-transition:color .2s ease-in-out;
    -ms-transition:color .2s ease-in-out;
    -o-transition:color .2s ease-in-out;
    }
    #navMain li:first-child a {border-left:none;}
    #navMain li:last-child a{border-right:none;}
    #navMain li:hover > a {background:#565454;color:#fff200;}

/* Sub Menu */
#navMain ul {
    background: #565454;
    border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    position:absolute;
    left: 0;
    top: 46px;
    opacity: 0;
    filter: alpha(opacity = 0);
    transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    min-width:200px;
    }

    #navMain ul.electronics {
        min-width:350px;    
    }

    #navMain li:hover > ul {opacity:1;filter: alpha(opacity = 100);}

#navMain ul li {
    height:0;
    overflow:hidden;
    padding:0;
    transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    }
    #navMain li:hover > ul li {height:38px;overflow:visible;padding:0;}

#navMain ul li a {
    border:none;
    color:#fff;display:block;
    font-size:18px;
    margin:4px 4px;
    padding:8px 14px 8px 14px;
    white-space:nowrap;
    width:200px; /* Stretches Submenu */
    }
    #navMain ul li:last-child {margin-bottom:6px;}
    #navMain ul li:last-child a {border:none;padding:4px 14px 1px 14px;}
    #navMain ul li a:hover {background:none;}
    #navMain ul li span {white-space:nowrap;}

    .navMain_buffer {height:8px;}


/* ////////// MAIN CONTENT /////////// */

HTMLは次のとおりです。

<div id="mainNav-wrap">
<ul id="navMain">
          <li><a href="#" title="Electronics">ELECTRONICS</a>
                               <ul class="electronics">
                                <li><a href="#" title="HDTVs 19&quot;-32&quot;">HDTVs 19&quot;-32&quot;</a></li>
                                <li><a href="#" title="HDTVs 37&quot; and Up">HDTVs 37&quot; and Up</a></li>
                                <li><a href="#" title="Gaming Systems">Gaming Systems</a></li>
                                <li><a href="#" title="HOME THEATER">Home Theater</a></li>
                                <li><a href="#" title="Stereos and Home Theater Systems">Stereos and Home Theater Systems</a></li>
                                <li><a href="#" title="Digital Cameras and Camcorders">Digital Cameras and Camcorders</a></li>
                                <li><a href="#" title="Digital Cameras and Camcorders">Small Electronics</a></li>
                          </ul>
                   </li>
           <li><a href="#" title="Computers">Computers</a>
                               <ul>
                                <li><a href="#" title="Laptops">Laptops</a></li>
                                <li><a href="#" title="Tablets">Tablets</a></li>
                                <li><a href="#" title="Desktops">Desktops</a></li>
                                <li><a href="#" title="Computer Desks">Computer Desks</a></li>
                          </ul>
                   </li>
           <li><a href="#" title="Appliances">APPLIANCES</a>
                               <ul>
                                <li><a href="#" title="Washer and Dryers">Washer and Dryers</a></li>
                                <li><a href="#" title="Refrigerators">Refrigerators</a></li>
                                <li><a href="#" title="Freezers">Freezers</a></li>
                                <li><a href="#" title="Ranges">Ranges</a></li>
                          </ul>
                   </li>
           <li><a href="#" title="Bedrooms">Bedrooms</a>
                               <ul>
                                <li><a href="#" title="Bedroom Sets">Bedroom Sets</a></li>
                                <li><a href="#" title="Kid's Bedrooms">Kid's Bedrooms</a></li>
                                <li><a href="#" title="Mattresses">Mattresses</a></li>
                          </ul>
                   </li>

                    <li><a href="#" title="Dinning Rooms">Dinning Rooms</a></li>

                   <li><a href="#" title="Living Rooms">Living Rooms</a>
                               <ul>
                                <li><a href="#" title="Recliners">Recliners</a></li>
                                <li><a href="#" title="Sectionals">Sectionals</a></li>
                                <li><a href="#" title="Living Room Sets">Living Room Sets</a></li>
                                <li><a href="#" title="Accessories">Accessories</a></li>
                                </ul>
                   </li>
      </ul>
      </div><!-- /END main-nav-wrap -->
4

1 に答える 1

1

私は答えを持っています!要素には -1000 の z-index が必要であることが判明しました。それが私の問題を引き起こしていました。したがって、これは私のcssに追加する必要があるものです:

html {
position:relative;
z-index:-1000;
}
于 2012-12-11T16:37:41.130 に答える