Panel in Horizontal List item showing behind Button

Question

On my Master page, I have created a Horizontal menu, styled by CSS. The list items show panels with link buttons on them to take users to different pages.

The Panels always show above controls, except for one page.
The content of the page shows 2 asp:Buttons. On this page, the panel gets hidden behind the buttons, but the border for the panel still shows.

The image below will illustrate clearly:

The CSS for the horizontal menu is as follows:

/* 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;
}

The panel goes through a skin file:
<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 with the z-index. How can I create a solution.

Answer 1

The answer lies in the z-index of the UL. I have changed the UL css to the following:

ul 
{

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

Which has now fixed the issue.