Jquery dropdown menu overlap
<p>I have a jquery dropdown menu that i have issue. I wanted to <strong>overlap</strong> my Main Menu by my submenu, basically the image is the main menu.!</p>

<p>link to actual scenario <a href="http://i.stack.imgur.com/bVlMK.jpg" rel="nofollow">overlap fail</a></p>

<p>here is the CSS code`
</p>

<pre><code>/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
    float:left;
    display:block;
    width:100px; 
    background:#fff; 
    position:relative;
    margin:0 1px;
    z-index:1;

}

/* this is the parent menu */
#nav li a {
    /*display:block;*/ 
    padding:8px 5px 0 5px; 
    font-weight:700;  
    height:23px; 
    text-decoration:none; 
    color:#fff; 
    text-align:center; 
    color:#333;
    z-index:-1;

   }

#nav li a:hover {
    color:#ccc;
}

/* you can make a different style for default selected value */
#nav a.selected {
    color:#f00;
}

    /* submenu, it's hidden by default */
    #nav ul {
        position:absolute; 
        left:0;
        top:0; 
        display:none; 
        margin:0 0 0 -1px; 
        padding:0; 
        list-style:none;
        z-index:1;
      }

    #nav ul li {
        width:100px; 
        float:left; 
        border-top:1px solid #fff;
    }

    /* display block will make the link fill the whole area of LI */
    #nav ul a {
        display:block;  
        height:15px;
        padding: 8px 5px; 
        color:#666;
    }

    #nav ul a:hover {
        text-decoration:underline;  
    }
     #nav a {
         display:block; color:#000; text-decoration:none;
    } 
     #nav ul li a {
         display:block; padding:3px 7px 5px; background-color:#ccc; color:#333;
    }
       #nav ul li a:hover {
         background-color:#ccc; text-decoration:underline; color: white;
    }
       #nav ul ul {
          left:102px; top:-1px; display:none; position:absolute; z-index: 9998;
    }

   /* fix ie6 small issue */
   /* we should always avoid using hack like this */
   /* should put it into separate file : ) */
    *html #nav ul {
       margin:0 0 0 -2px;
          }
</code></pre>

<p>
`</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function () { 

    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);

        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);         
        }
    );

});
&lt;/script&gt;
</code></pre>

<p>i think what is needed here is how to overlap another 'li' by the sub menu
hope you can help me out here. thanks a lot</p>
