Question

http://profiledt.co.uk/SetTraining

标签里面有菜单，不过我似乎无法让它在IE8中显示在滑块前面。

.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;与它的元素。

z-index无法在Internet Explorer 8上运行

1 个答案: