在IE9上打破下拉菜单

Question

我正在建立一个购买主题的网站，在FF和Chrome中它看起来很完美。但是，在IE9的兼容模式下，我遇到了一个大问题。 一个菜单项有下拉列表，在IE上，下拉菜单移动到下一个菜单项旁边，很难点击它。我试过＆＃34;播放＆＃34;用CSS导航和菜单设置，但没有运气... 任何人都可以提供帮助：

/* Mainmenu Styling */
#mainmenu{
width:680px;
margin:1px 0px 0px 0px;
float:left;
}
.navigation{
width:630px;
margin-top:38px;
padding-left:160px;
float:left;
list-style-type:none;
 }
.navigation ul{
margin:0px; 
padding:0px; 
list-style-type:none; 
position:left;
clear:both; 
}
.navigation li{ 
list-style-type:none; 
padding:0px; 
margin:0px; 
float:left;
z-index:100; 
position:relative;
}
.navigation li a{
font-size:16px;
text-decoration:none;
color:#a7a6a6; 
display:block; 
padding:10px 30px 16px 8px;
float:left;
z-index:100; 
margin-right:0px;
 }
 .navigation li.current a, .navigation li a:hover, .navigation li.current li a:hover{
text-decoration:none;
color: #d23a3b; 
 }
.navigation li.current li a{
text-decoration:none;
color:#a7a6a6;
}
.navigation li li{
margin:0 0 0px 0px;
padding:0px;
position:relative;
z-index:100;    
}
.navigation ul{
display:none;
position:absolute;
top:45px;
width:159px;
padding-bottom:5px;
z-index:100;    
background-color:#fafafa;
border-top:none;
border-bottom:1px solid #d3d3d3;
border-left:1px solid #d3d3d3;
border-right:1px solid #d3d3d3;
}
.navigation li ul a{
width:109px;
height:auto;
float:left;
padding:0px 15px 8px 15px;
font-size:14px;
color:#a7a6a6;
line-height:24px;
z-index:100;
text-decoration:none;

}

链接是：http://goo.gl/LHDtg

Answer 1

尝试以下css以获取所需的IE版本

.navigation ul {
    background-color: #FAFAFA;
    border-color: -moz-use-text-color #D3D3D3 #D3D3D3;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    display: none;
    padding-bottom: 5px;
    position: absolute;
    top: 85px; /* in your website it is 45px but for IE i just tried 85px which work fine*/
    width: 159px;
    z-index: 100;
}

查看图片进行演示：我在IE8中尝试过它