2013-12-11 108 views
0

http://profiledt.co.uk/SetTraining的z-index不工作在Internet Explorer 8

標籤具有裏面的菜單,但我似乎無法得到它允許下拉出現在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; 
} 

我使用的是Windows XP計算機與Internet Explorer 8

感謝

回答

4

z-index的將不是一個靜態的元素(默認)上工作。他們必須是相對的或絕對的。 嘗試添加positon:relative;與它的元素。

+0

這是導航還是滑塊? –

+0

在包含z-index的每種樣式上。看描述:http://www.w3schools.com/cssref/pr_pos_z-index.asp –

+0

謝謝Yoann!我知道了!最後:D –

相關問題