Выпадающее меню не работает в IE9 - PullRequest
0 голосов
/ 16 марта 2012

Я создаю веб-сайт из купленной темы, и в FF и в Chrome это выглядит идеально. Но на IE9 в режиме совместимости у меня большая проблема.У одного пункта меню есть выпадающий список, и в IE это выпадающее меню перемещается ниже следующего пункта меню, и щелкнуть по нему очень сложно. Я пытался "поиграться" с помощью навигации и настройки меню 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

1 Ответ

0 голосов
/ 16 марта 2012

попробуйте приведенную ниже 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

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...