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);
    }

有时 ie 无法识别将鼠标悬停在除元素之外的a元素上。

于 2012-06-10T17:53:05.700 回答