Problem: Menu UL is always behind jquery dialog

I am trying to setup the simple menu item within the jquery dialog. But for larger menus half the menu is only shown in the dialog, remaining are hidden behind jquery dialog.

I tried increase the z-index of ul to 1003 (z-index of dialog is 1002), but that also not working.

below the sample code

     <table style="width: 650px; left: 0px;display:none;overflow:auto"   class="srchTop" id="tblMain" >
     <tr>
     <td colspan="3" align="left" style="width: 90%">
               <div style="width: 120px; float: left; vertical-align: middle">
                                <div id="SearchInDiv" style="border-color: #0099d4; width: 120px; height: 100%" >
                                    <ul>
                                        <li><a href="#" ><span id="SpanInHeader">Search In &nbsp; <em>
                                            <img src="images/zonebar-downarrow.png" alt="dropdown" />
                                        </em></span></a>
                                            <ul>
                                                <li><a href="javascript:TriggerFilter(1,'SearchIn','Menu1')">Menu1</a></li>
                                                <li><a href="javascript:TriggerFilter(6,'SearchIn','Menu2')">Menu2</a></li>
                                                <li><a href="javascript:TriggerFilter(5,'SearchIn','Menu2')">Menu2</a></li>
                                                <li><a href="javascript:TriggerFilter(3,'SearchIn','Notes')">Menu4</a></li>
                                                <li><a href="javascript:TriggerFilter(2,'SearchIn','All Fields')">Common Fields</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
            </td>
         </tr>
        </table>

and the css

     #SearchInDiv {
background:White;   
min-height: 20px;
float:right;
    text-decoration: none;
    color: #335588;
}
#SearchInDiv ul {
    display: block;
    }
    #SearchInDiv ul li {
        position: relative;
        float: right;
        padding: 1px 5px 0 5px;
        z-index: 600;
        }

        #SearchInDiv ul li a 
        {
            display: block;
            float: right;
            position: relative;
            color: #383838;             
            font-size: 11px;
            text-decoration: none;
            outline: none;
            width:115px;
            z-inde开发者_StackOverflow中文版x: 600;
        }
#SearchInDiv ul li ul 
        {
            float: left;
            display: none;
            position: absolute;
            top: 20px;
            left: 1px;
            width: 120px;
            border: 1px solid #ccc;
            background: white;
            text-decoration: none;
            outline: none;
            z-index: 1003;
            }

I couldn't understand the problem, can someone help me solve this one

EDIT

Here the dialog settings

 $("#tblMain").dialog({
        autoOpen: false,
        width: 660,
        resizable:false,
        modal:true,
        zIndex: 100
    });

and code to launch menu

$("#SpanInHeader").click(function() {
                var hidden = $(this).parents("li").children("ul").is(":hidden");

                $("#SearchInDiv>ul>li>ul").hide()        

                if (hidden) {
                    $(this)
                        .parents("li").children("ul").toggle();
                    } 
    });

Did you try setting the float property, or a z-index: 9999?

You can initialize a jQuery .dialog() with a custom z-index. Have you tried something like this?

$('.your_selector').dialog({ 
  zIndex: 700
});