title: How do I move JQuery submenu
body: <p>I am helping a friend with her website and am having an issue with the menu that comes with JQuery.  Actually it is the submenu.  It is appearing behind an overlapping div.  I have tried using position in css but to no avail.  This is a demo of what is happening.  www.hvactechhelp.com/Ashley</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Just to clarify.  I need the submenu to appear above the buttons on the page.  Z-Index would put the submenu on top.</p>
  
  <p>This is the HTML  The css is the standard jquery-ui.css</p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;div class="l_content"&gt; 
  
      &lt;ul id="menu"&gt;
  
        &lt;li&gt;&lt;img src="images/nav-r1.gif" width="201" height="32" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images/nav2.gif" width="200" height="32" /&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images/nav3.gif" width="200" height="32" /&gt;
  
          &lt;ul&gt;
             &lt;li&gt;&lt;a href="Untitled-3.html"&gt;&lt;img src="images/GDsub-r1.png" width="200" height="40"    /&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="Untitled-3.html"&gt;&lt;img src="images/GDsub-r2.png" width="200" height="40" /&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="Untitled-3.html"&gt;&lt;img src="images/GDsub-r3.png" width="200" height="40" /&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="Untitled-3.html"&gt;&lt;img src="images/GDsub-r4.png" width="200" height="40" /&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="Untitled-3.html"&gt;&lt;img src="images/GDsub-r5.png" width="200" height="40" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;img src="images/nav4.gif" width="200" height="32" /&gt;&lt;/li&gt;
       &lt;li&gt;&lt;img src="images/nav5.gif" width="200" height="40" /&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  
    &lt;/div&gt;
  
  
    &lt;div class="r_content"&gt;&lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>