2012-09-17 95 views
0

在我的母版頁上,我創建了一個CSS樣式的水平菜單。列表項顯示帶有鏈接按鈕的面板,以將用戶帶到不同的頁面。面板顯示在水平列表項後面按鈕

面板總是顯示上面的控件,除了一頁。
頁面內容顯示2個asp:按鈕。在此頁面上,面板隱藏在按鈕後面,但面板的邊框仍顯示。

下面的圖像將清楚地說明:
Evidence

用於水平菜單的CSS如下:

/* Horizontal menue style */ 
ul 
{ 

    padding: 0; 
    margin: 0 0 0 0 ; 
    list-style: none; 
} 

li 
{ 
    cursor: default; 
    float: left; 
    position: relative; 
    width: 90px; 
    color: darkgray; 
    text-align: center; 
    background-color: white; 
    height: 23px; 
    padding-top: 2px; 
} 

li:hover { 
    background-color: white; 
    color: black; 
    padding-top: 2px; 
} 

li ul 
{ 

    display: none; 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    margin-top: -9px; 
    width: 100px; 
} 

li > ul 
{ 

    top: auto; 
    left: auto; 
} 

li:hover ul, li.over ul 
{ 
    display: block; 
} 

面板經過皮膚文件:
<asp:Panel runat="server" CssClass="menuWrapper" SkinID="MenuWrapper"></asp:Panel>

.menuWrapper 
{ 
    z-index: 500; 
    font-size: small; 
    margin-top: 15px; 
    margin-left: -2px; 
    padding: 5px; 
    padding-left: 15px; 
    line-height: 25px; 
    background-color: white; 
    width: 190px; 
    text-align: left; 
    border-left: 1px lightgray solid; 
    border-bottom: 1px lightgray solid; 
    border-right: 1px lightgray solid; 
    border-top-right-radius: 5px 5px; 
    border-bottom-right-radius: 5px 5px; 
    border-bottom-left-radius: 5px 5px; 
} 

Ive even fiddles與Z指數。我如何創建一個解決方案。

回答

0

答案在於UL的z-索引。 我已經改變了UL CSS以下幾點:

ul 
{ 

    padding: 0; 
    margin: 0 0 0 0 ; 
    list-style: none; 
    z-index: 499; 
} 

現在其中已解決了該問題。