問題：メニューULは常にjqueryダイアログの後ろにあります。

Question

jqueryダイアログ内に簡単なメニュー項目を設定しようとしています。しかし、大きなメニューの場合、メニューの半分はダイアログにのみ表示され、残りはjqueryダイアログの後ろに隠されます。

ulのz-indexを1003に増やしてみました（ダイアログのz-indexは1002ですが、それも機能しません）。

誰かが私はこの1つの

EDIT

を解決することができます私は、問題を理解できなかったサンプルコード

 <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> 

と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-index: 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; 
      } 

以下

ここでダイアログの設定

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

とコードメニュー

$("#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(); 
        } 
    }); 

Answer 1

を起動しますfloatプロパティを設定してみてください、またはz-index: 9999ましたか？

Answer 2

.dialog()をcustom z-indexに初期化できます。このようなことを試しましたか？

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