css下拉菜单在IE中不起作用答案

【问题标题】：css dropdown menu not working in IEcss下拉菜单在IE中不起作用
【发布时间】：2013-10-23 05:36:39
【问题描述】：

我有一个水平 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;

}

【问题讨论】：

我正在使用 Chrome，它有很多问题：jsfiddle.net/FT5ks您是否提供了所需的所有 CSS 和 HTML？
我已经复制了我的 html 和 css 的一部分。并放在这里

标签： html css internet-explorer

【解决方案1】：

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

【讨论】：

问题出在 fisex...我忘记了 :S

【解决方案2】：

你试过用 em 代替 px。

【讨论】：