수평으로 뒤집힌 목록에있는 패널

Question

내 마스터 페이지에서 CSS로 스타일이 지정된 가로 메뉴를 만들었습니다. 목록 항목에는 링크 버튼이있는 패널이 표시되어 사용자를 다른 페이지로 이동시킵니다.

패널은 항상 한 페이지를 제외하고 컨트롤 위에 표시됩니다.
페이지의 내용은 2 개의 ASP : 버튼을 표시합니다. 이 페이지에서 패널은 버튼 뒤에 숨겨 지지만 패널의 테두리는 여전히 표시됩니다.

아래 이미지는 명확하게 설명 할 것이다 :
이

는 다음과 수평 메뉴에 대한 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- 색인으로 어떻게 솔루션을 만들 수 있습니까?

Answer 1

답변은 UL의 Z- 색인에 있습니다. 나는 다음에 UL의 CSS를 변경 :

이제 문제를 해결했다

ul 
{ 

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

.