0

HTMLでドロップダウンナビゲーションを作成しました。次に、chrome、firefox、opera、IE などのさまざまなブラウザーでテストしました。唯一の問題は、ナビゲーションが IE で正しく表示されないことです。

HTML:

<div id="nav_bar">
    <ul id="nav">
        <li><a href="index.html" title="Go to our Home Page.">Home</a></li>

        <li><a href="#">Krazie</a>
            <ul>
                <li><a href="krazie/colour.html" title="Go to Krazie's Colour portfolio.">Colour</a></li>
                <br />
                <li><a href="krazie/black.html" title="Go to Krazie's Black 'N' Grey portfolio.">Black 'N' Grey</a></li>
            </ul>
        </li> 
<!-- End of Krazie links -->            
        <li><a href="#">Stacy</a>
            <ul>    
                <li><a href="stacy/colour.html" title="Go to Stacy's Colour portfolio.">Colour</a></li>
                <br />
                <li><a href="stacy/black.html" title="Go to Stacy's Black 'N' Grey portfolio.">Black 'N' Grey</a></li>
            </ul>
        </li>
<!-- End of stacy links -->         
        <li><a href="#">Matt</a>
            <ul>    
                <li><a href="matt/colour.html" title="Go to Matt's Colour portfolio.">Colour</a></li>
                <br />
                <li><a href="matt/black.html" title="Go to Matt's Black 'N' Grey portfolio.">Black 'N' Grey</a></li>
            </ul>
        </li>   
<!-- End of matt links -->          
        <li><a href="contact.html" title="Go to our Contact page.">Contact</a></li>
    </ul>
</div>

CSS:

#nav 
{
    margin-top:-0px;
    background:rgb(108,108,108);
    position:fixed;
    top:0;
    left:0;
    z-index:10;
    width:100%;
    z-index:9003;
    height:32px;
    list-style:none;
    color:#FFF;
}

#nav li 
{ 
    float: left;
    list-style:none;
}

#nav li a 
{
    display: block;
    height:2em;
    line-height:2em;
    padding:0px 10px;
    text-decoration:none;
    list-style:none;
    color:#FFF;
}

#nav ul 
{   
    padding:0px;
    margin-left:-20px;
    background:rgb(108,108,108);
    position:absolute;
    display:none;
    z-index:9003;
    list-style:none;
}

#nav ul li a
{
    padding:-50px;
    width:110px;
    list-style:none;
}

#nav li:hover ul
{
    display:block;
    list-style:none;
}   

#nav > li:hover > a 
{
    background:rgb(108,108,108);
}

#nav ul li:hover  a
{    
    background:rgb(48,48,50);
}

正しく表示されないビットは、マウスを上に置いたときに表示される実際のリンクです。これは、Chrome などの他のブラウザーでは次のように表示されます: http://grab.by/e5ik ですが、IE では次のように表示されます: http://grab.by/e5im

4

2 に答える 2

0

コードが複雑すぎて作業を完了できないようです。

<br />ところで、 htmlで削除してください。

次に、次のCSSを追加します:(#nav ulとの間#nav ul li a）

#nav ul li {
    clear: both;
}

（IE8でテスト済み）

エラーが発生していないか、ブラウザでもう一度確認してください。

于 2012-06-10T17:48:13.843 に答える
0

これを変える-

#nav ul li a
{
    padding:-50px;
    width:110px;
    list-style:none;
}    
#nav li:hover ul
{
    display:block;
    list-style:none;
}   

#nav > li:hover > a 
{
    background:rgb(108,108,108);
}

#nav ul li:hover a
{    
    background:rgb(48,48,50);
}

これに-

#nav ul li a
{
    padding:-50px;
    width:110px;
    list-style:none;
    display:block
}    
#nav a:hover ul
    {
        display:block;
        list-style:none;
    }   

    #nav > li > a:hover
    {
        background:rgb(108,108,108);
    }

    #nav ul li a:hover
    {    
        background:rgb(48,48,50);
    }

要素以外の要素にカーソルを合わせても認識しない場合がありaます。

于 2012-06-10T17:53:05.700 に答える