How do I move JQuery submenu

Question

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

Any help would be appreciated.

Just to clarify. I need the submenu to appear above the buttons on the page. Z-Index would put the submenu on top.

This is the HTML The css is the standard jquery-ui.css

<div class="content">
  <div class="l_content"> 

    <ul id="menu">

      <li><img src="images/nav-r1.gif" width="201" height="32" /></li>
      <li><img src="images/nav2.gif" width="200" height="32" /></li>
      <li><img src="images/nav3.gif" width="200" height="32" />

        <ul>
           <li><a href="Untitled-3.html"><img src="images/GDsub-r1.png" width="200" height="40"    /></a></li>
           <li><a href="Untitled-3.html"><img src="images/GDsub-r2.png" width="200" height="40" /></a></li>
           <li><a href="Untitled-3.html"><img src="images/GDsub-r3.png" width="200" height="40" /></a></li>
           <li><a href="Untitled-3.html"><img src="images/GDsub-r4.png" width="200" height="40" /></a></li>
           <li><a href="Untitled-3.html"><img src="images/GDsub-r5.png" width="200" height="40" /></a></li>
        </ul>
     </li>
     <li><img src="images/nav4.gif" width="200" height="32" /></li>
     <li><img src="images/nav5.gif" width="200" height="40" /></li>

    </ul>

  </div>


  <div class="r_content"></div>


</div>

Answer 1

代码将使回答变得更容易，但是一个疯狂的猜测是，在子菜单中添加一个比div高的z-index 。

Answer 2

Your submenu unordered list tag has inline style with property top:10px . Change this to top:-30px .

This should shift the submenu above your footer.