Question

我在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

Answer 1

您的代码似乎太复杂，无法完成您的工作。

顺便说一句，请在html中删除<br />。

然后，添加以下CSS :( #nav ul和#nav ul li a之间）

#nav ul li {
    clear: both;
}

（在IE8中测试）

请在浏览器中再次检查是否发生错误。

Answer 2

改变这个 -

#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元素之外的元素上。

IE导航下拉列表不会显示

2 个答案: