title: How do I force jQuery UI Selectmenu to appear above (i.e. in front of) a jQuery modal window?
body: <p>I'm using <em>jQuery UI Selectmenu</em> to style a form's dropdowns. I've created an example page of the form, so that you can see exactly what it is I am about to ask:</p>
  
  <p><a href="http://www.fdl-portals.com/search/" rel="nofollow">Test Page: jQuery UI Selectmenu</a></p>
  
  <p>As you'll see on the page that you arrive at after clicking the above example link, everything works fine with the main page's jQuery UI Selectmenu dropdowns (fields: "Page Dropdown 1" and "Page Dropdown 2"). The problem that I have is that I cannot get the dropdowns to appear correctly on the modal window within the page.</p>
  
  <p>Please click the above page's "Search" button to get to the modal window example.</p>
  
  <p>The error is that the modal window's dropdowns (fields: "Modal Dropdown 1" and "Modal Dropdown 2") are appearing <strong>behind</strong> the modal window. You can see the bottom of them appear just under the modal window's bottom edge when you click on a dropdown. So my question is:</p>
  
  <p><em>How do I force jQuery UI Selectmenu to appear within (i.e. <strong>in front</strong>) jQuery modal window and not <strong>behind</strong> it?</em></p>
  
  <p>I am using <em>FancyBox</em> to create the modal window with the following code:</p>
  
  <pre><code>&lt;a id="terminateEmployee_01" href="#terminateEmployeeShortcut"&gt;
  &lt;img src="/search/img/buttons/search_out.gif" width="200" height="34" class="rollover"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Here is the code that defines the modal window's dropdown styling:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  &lt;!--
  $(document).ready(function() {
  // Dropdown Width Definitions
  $('select#modalDD01').selectmenu({
      style:'dropdown',
      width: 200,
      maxHeight: 238
  });
  
  $('select#modalDD02').selectmenu({
      style:'dropdown',
      width: 200,
      maxHeight: 238
  });
  });
  // --&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the code that creates the DIV in which the modal window lives:</p>
  
  <pre><code>&lt;div style="display: none;"&gt;
  &lt;div id="terminateEmployeeShortcut" style="width:470px;height:165px;overflow:auto;"&gt;
  &lt;table width="460" cellspacing="0"&gt; 
  &lt;tr&gt;
  &lt;td class="bodyLabel" width="220"&gt;Modal Dropdown 1&lt;/td&gt;
  &lt;td width="20"&gt;&lt;/td&gt;
  &lt;td class="bodyLabel" width="220"&gt;Modal Dropdown 2&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td width="220"&gt;
      &lt;fieldset&gt;
      &lt;select name="modalDD01" id="modalDD01" tabindex="20" /&gt;
      &lt;option value="" selected=""&gt;&amp;nbsp;&lt;/option&gt;
      &lt;option value="One"&gt;One&lt;/option&gt;
      &lt;option value="Two"&gt;Two&lt;/option&gt;
      &lt;option value="Three"&gt;Three&lt;/option&gt;
      &lt;option value="Four"&gt;Four&lt;/option&gt;
      &lt;option value="Five"&gt;Five&lt;/option&gt;
      &lt;/select&gt;
      &lt;/fieldset&gt;
  &lt;/td&gt;
  &lt;td width="20"&gt;&lt;/td&gt;
  &lt;td width="220"&gt;
      &lt;fieldset&gt;
      &lt;select name="modalDD02" id="modalDD02" tabindex="20" /&gt;
      &lt;option value="" selected=""&gt;&amp;nbsp;&lt;/option&gt;
      &lt;option value="One"&gt;One&lt;/option&gt;
      &lt;option value="Two"&gt;Two&lt;/option&gt;
      &lt;option value="Three"&gt;Three&lt;/option&gt;
      &lt;option value="Four"&gt;Four&lt;/option&gt;
      &lt;option value="Five"&gt;Five&lt;/option&gt;
      &lt;/select&gt;
      &lt;/fieldset&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;br clear="left"&gt;&lt;img src="/search/img/misc/spacer.gif" height="26" width="32"&gt;&lt;br clear="left"&gt;
  &lt;a href="javascript:void(0);"&gt;&lt;img src="/search/img/buttons/save_pop_out.gif" width="200" height="34" class="rollover"&gt;&lt;/a&gt;&lt;/center&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Again, though, perhaps seeing it in action is most helpful:</p>
  
  <p><a href="http://www.fdl-portals.com/search/" rel="nofollow">Test Page: jQuery UI Selectmenu</a></p>
  
  <p>Perhaps I can add something to it that will make it appear on top of everything else on the page?</p>
  
  <p>Please let me know what else I can provide for some help with this. Thank you so much in advance!</p>