css - z-index 不适用于 Internet Explorer 8

Question

http://profiledt.co.uk/SetTraining

标签里面有菜单，但是我似乎无法让它在 IE8 中让下拉菜单出现在 slider 的前面。

.main-navigation {
    width: 100% !important;
}
.main-navigation a {
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    color: #fff !important;
    padding: 0 25px;
    text-decoration: none;
    font-weight: 700;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.main-navigation a:hover {
    color: #fff!important;
    background: #008AE6;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
ul.nav-menu {
    /* background: #008AE6 !important; */
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {


    border-top: 1px solid #ededed;
    display: inline-block !important;
    text-align: left;
    width: 100%;
/* CUSTOM CODE */
    background: #1f4e9b;
    /*border-bottom: 5px solid #eee; */
    position: relative;
    z-index: 103;
}
.main-navigation ul {
    margin: 0;
    text-indent: 0;
    background: ;
}
.main-navigation li a,
.main-navigation li {
    display: inline-block;
    text-decoration: none;
}
.main-navigation li a {
    border-bottom: 0;
    color: #6a6a6a;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
}
.main-navigation li a:hover {
    color: #000;
}
.main-navigation li {

    //Margin makes nav out of place
    margin: 0 40px 0 0;
    /*margin: 0 2.857142857rem 0 0;*/


    position: relative;
}
.main-navigation li ul {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 200; /*importance*/
}
.main-navigation li ul ul {
    top: 0;
    left: 100%;
}
.main-navigation ul li:hover > ul {
    border-left: 0;
    display: block;
}
.main-navigation li ul li a {
    background: #2989ff;
    border-bottom: 1px solid #ededed;
    display: block;
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    padding: 8px 10px;
    padding: 0.571428571rem 0.714285714rem;
    width: 180px;
    width: 12.85714286rem;
    white-space: normal;
}
.main-navigation li ul li a:hover {
    background: #3d9dff;
    color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
    color: #636363;
    font-weight: bold;
    z-index: 9999;
}
.menu-toggle {
    display: none;
}

我使用的是装有 Internet Explorer 8 的 Windows XP 机器。

谢谢

Answer 1

z-index 不适用于静态元素(默认)。它们必须是相对的或绝对的。尝试添加 positon:relative;在它的元素上。