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

您是否尝试过改变你的高度，以像素值，即height: 37px;和height: 33px;？如果是这样，其他浏览器可能会认为你的意思是px，IE可能不是。

Answer 2

你有没有试过em而不是px。