CSS下拉菜单在IE中不起作用

Question

我有一个水平ccs下拉菜单，该菜单在IE中不起作用。 颜色不会悬停，下拉列表也不会下降。 它可以在其他浏览器（如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;

}

Answer 1

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

Answer 2

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