下拉菜单在ie8上无法正常显示，它在火狐和镀铬方面表现出色 [英] dropdown-menu is not displaying properly on ie8, its working great in fire-fox and chrome

问题描述

http://couponhai.in/... check it

Css is here:

/* main-menu class has further sub class .has-sub for dropdown */
.main-nav{
     float: right;
}
#main-menu{}
#main-menu > li{
float: left;
border-left: 2px solid rgb(225, 225, 225);
padding: 2px 20px 3px;
position: relative;
z-index:999;

}
#main-menu > li:first-child{
    border-left: 0 ;
    z-index:999;
}
#main-menu > li > a{
    font-size: 1.076923076923077em;
    position: relative;
    z-index:999;
}
#main-menu > li.has-sub > a:before{
    content: "";

    position: absolute;
    top: 7px;
    right: -18px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #777777 transparent transparent transparent;
    z-index:999;
}
#main-menu > li.active > a,#main-menu > li > a:hover
{enter code here
   background: #fff;
    color: #FFBE19;
    transition:color 0.3s;
    -o-transition:color 0.3s;
    -ms-transition:color 0.3s;
    -moz-transition:color 0.3s;
    -webkit-transition:color 0.3s;
    text-decoration: none;
    z-index:999;

}
#main-menu > li.has-sub{
    padding-left: 9px;
    padding-right: 35px;
    z-index:999;
}
#main-menu > li.has-sub:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 8px;
    background: #fff;
    bottom: -8px;
    left: 0;
    z-index:999999999;
    display: none;
}
#main-menu > li.has-sub:hover:after{
    display: block;
}
#main-menu > li.has-sub:hover{
    box-shadow: 0 -1px 5px 1px rgba(255, 190, 25, 0.2);
    background: #fff;
    border-left: 0;
    margin-left: 2px;
    padding-top: 8px;
    margin-top: -6px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
#main-menu > li:hover{
    box-shadow: 0 -1px 5px 1px rgba(255, 190, 25, 0.2);
    background: #fff;
    border-left: 0;
    margin-left: 2px;
    padding-top: 8px;
    margin-top: -6px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color:#ffbe19;
}
#main-menu > li.has-sub:hover a:before{
    display: none;
}
#main-menu > li.has-sub:hover > a{
    color: #FFBE19;
    text-decoration: none;
}
#main-menu > li.has-sub:hover + li{
    border-left: 0;
    margin-left: 2px;
}
#main-menu > li > .sub-menu{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0 0 5px 0;
    background: #ffffff;
    min-width: 190px;
    left: 0;
    top: 100%;
    box-shadow: 0 0 5px 2px rgba(255, 190, 25, 0.2);
    border-radius: 4px;
    border-top-left-radius: 0px;
    /*border-top-right-radius: 4px;*/
    transition:opacity 0.3s;
    -o-transition:opacity 0.3s;
    -ms-transition:opacity 0.3s;
    -moz-transition:opacity 0.3s;
    -webkit-transition:opacity 0.3s;
    z-index: 999999999;
}
#main-menu > li > .sub-menu li:first-child{
    margin-top: 8px;
}
#main-menu > li:hover > .sub-menu{
    opacity: 1 ;
    visibility: visible;
}
.sub-menu > li{
    padding: 0 5px;
    color:#AD0800;
    list-style-type: none;
}
.sub-menu > li > a{
    display: block;
    background: #ffffff;
    font-family: "Open Sans", Times New Roman;
    font-weight: 400;
    font-size: 1.076923076923077em;
    color: black;
    padding: 4px;
}
#category .sub-menu > li > a{
    display: block;
    background: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-weight: bolder;
    font-size: 1.076923076923077em;
    color: #75c202;
    padding: 4px;
    z-index:999999999;
}

.cat-menu > li > a{
    display: block;
    background: #ffffff;
    font-family: "Open Sans", Times New Roman;
    font-weight: 600;
    font-size: 1.023076923077em;
    color: black;
    padding: 4px;
    z-index:999999999;
}
.cat-menu > li > a:hover
{
    color:#FFA43E;
    }
.sub-menu > li > a:hover{
    background: #f2f2f2;
    text-decoration: none;
}

推荐答案

在一行中：因为必须移动到IE9。

In one line : move to IE9 because you have to.

这篇关于下拉菜单在ie8上无法正常显示，它在火狐和镀铬方面表现出色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！