實際菜單後面的下拉css菜單（z-index）

Question

我遇到隱藏在菜單下一行後面的子菜單問題。 VS

我已經搜查了許多話題和問題，基本上每個人都在說，我需要的z-index> 100添加到我的子菜單。我嘗試過到處都有子菜單，但沒有任何效果。

你有什麼想法如何讓它工作，因爲它應該？

這裏是我的代碼：

#header #nav{ 
    float:right; 
    margin:0px; 
    position:relative; 
    z-index:100; 
} 

#header #nav > li { 
    display:inline-block; 
    margin:0; 
    position:relative; 
    z-index:100; 
} 

#header #nav > li > a{ 
    color:#727272; 
    border:none; 
    background:none; 
    font-size:11px; 
    font-weight:700; 
    height:60px; 
    line-height:59px; 
    display:block; 
    padding:0 15px; 
    background:none center bottom; 
    position:relative; 
} 

#header #nav > li > a:hover{ 
    color: #0073fe; 
} 

#nav li ul.sub-menu{ 
    width:210px; 
    background:#fff; 
    position:absolute; 
    border:1px solid #ececec; 
    border-top:2px solid #0073fe; 
    margin:0; 
    top:96%; 
    padding:0 15px; 
    display:none; 
    -webkit-box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05); 
    box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05); 
    margin-top:2px;   
} 

#nav li ul.sub-menu > span{ 
    position:absolute; 
    top:-6px; 
    left:30px; 
    width: 0; 
    height: 0; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid #0073fe; 
} 

#nav li ul.sub-menu > li{ 
    margin:0; 
    width:100%; 
    display:block; 
} 

#nav li ul li a{ 
    font-size:11px; 
    font-weight:700; 
    display:block; 
    padding:7px 0px; 
    color:#727272; 
    border:none; 
    border-bottom:1px solid #ececec; 
} 

#nav li ul li a:hover{ 
    color: #0073fe; 
} 

#nav li ul li:last-child a{ 
    border-bottom:none !important; 
} 

#nav li ul li ul.sub-menu{ 
    margin-left: 190px !important; 
    margin-top: -35px !important; 
} 

.slogan{ 
    font-family: 'Open Sans', Helvetica, Arial, sans-serif; 
    font-size:34px; 
    line-height:35px; 
    text-align:center; 
    font-weight:300; 
    letter-spacing: -0.01em; 
    color:#000; 
    padding:0px 30px 30px; 
} 

Answer 1

所以，你想：submenu > menu;這意味着：#nav li ul.sub-menu > #header/#nav

問題是，您將菜單設置爲z-index高而不是子菜單（並且結果爲：submenu < menu）。

的z-index定義「設置圖層」在您的要素是，如果它不是另外一個設置得更高，那麼它就會出現在它的上面。

您需要刪除#header #nav和#header #nav>li的Z索引，而是將高Z索引設置爲#nav li ul.sub-menu。

#nav li ul.sub-menu { 
    z-index: 50; //It doesn't have to be a hundred, 50 should do, or even 5... 
}