面板显示在水平列表项后面按钮

在我的母版页上，我创建了一个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指数。我如何创建一个解决方案。

来源

2012-09-17 TheGeekZn

答案在于UL的z-索引。我已经改变了UL CSS以下几点：

ul 
{ 

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

现在其中已解决了该问题。

来源

2012-09-17 09:40:18 TheGeekZn

面板显示在水平列表项后面按钮

回答

相关问题