1

我有一个在 IE 中不起作用的水平 ccs 下拉菜单。颜色不会悬停，下拉菜单不会下降。它适用于其他浏览器，如 Safari、firefox 等。我有 IE 10。

我做错了什么？

这是我的 HTML：

        <ul class="nav">
    <li><a href = '#'><img src="images/house.png"/></a></li>
    <li class="menu"><a href = '#'><span>Je Studie</span></a>

        <ul>
            <li><a href='#'>Programma</a></li>
            <li><a href='#'>Begeleiding</a></li>
            <li><a href='#'>Locaties</a></li>
            <li><a href='#'>Open dag</a></li>
            <li><a href='#'>Toelatingseisen</a></li>
            <li><a href='#'>Aanmelden</a></li>
        </ul>
        </li>

    <li class="menu"><a href = '#'><span>Voor ouders</span></a>
            <ul>
            <li><a href='#'>Studiekeuzeproces</a></li>
            <li><a href='#'>Studiekeuzeactiviteiten</a></li>
            <li><a href='#'>Het puberbrein</a></li>
            <li><a href='#'>Tips</a></li>
            <li><a href='#'>Begeleiding</a></li>
            </ul>
    </li>

    <li class="menu"><a href = '#'><span>Voor decanen</span></a>
            <ul>
            <li><a href='#'>Advies</a></li>
            <li><a href='#'>Studiekeuzeactiviteiten</a></li>
            <li><a href='#'>Decanennieuws</a></li>
            </ul>
    </li>

    <li class="menu"><a href = '#'><span>Voor bedrijven</span></a>
            <ul>
            <li><a href='#'>Opleiding</a></li>
            <li><a href='#'>Opdrachtstages</a></li>
            <li><a href='#'>Afstudeeropdrachten</a></li>
            </ul>
    </li>

    <li class="menu"><a href = '#'><span>Contact</span></a></li>
</ul>

和我的 CSS：

.nav , .nav ul {
        list-style-type:none;
        background:#d70047;

        }

.nav     {
        position:relative; 
        height:37;
        background:#d70047;
        }   

.nav a   {display:block; 
        color:white;
        font-family:Myriad Pro;
        font-size:16px;
        }


.nav li{
        float:left;
        margin:3px 0px 0px 0px;
        padding:3px 10px;
}

.nav .menu{
        padding:11px 47px 7px 47px;
        margin:0px 0px 0px 0px;
}
.nav .menu:hover{
        background:#e3e1e1;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }


.nav ul{
        visibility:hidden;
        top:100%;
        left:0;
        position:absolute;
        background:#e3e1e1;
        width:920px;
        height:33;
    }

.nav ul li a{
        font-family:Myriad Pro;
        font-size:15px;
        color:black !important;

}

.nav .menu:hover a{
        color:#1882a5;}

.nav ul li{
        background:#e3e1e1;
        padding:5px 50px 5px 5px;
    }


.nav ul li:hover{


}
.nav ul li:hover a{
        text-decoration:underline;
        font:bold;



}
.nav li:hover>ul{
        visibility:visible;

}
4

2 回答 2

1

您是否尝试过将高度更改为 px 值，即height: 37px;和height: 33px;？如果是这样，其他浏览器可能会假设您的意思是 px ，而 IE 可能不是。

于 2013-10-22T21:12:43.337 回答
0

您是否尝试过 em 而不是 px。

于 2013-10-22T21:29:01.037 回答